Html5内唤醒百度、高德APP的实现示例


Posted in HTML / CSS onMay 20, 2019

前几天,联合黑卡反馈了一个需求,需要在H5中打开百度APP或者是高德APP,于是我在网上查了相关文档,下面放上链接: 1.高德地图 2.百度地图

具体思路就是点击选择地图的时候,先去请求APP链接,800毫秒后无响应,再跳转至H5链接。这样的做法有一点不好就是不管跳不跳APP,都会跳到H5的链接。有好的想法可以评论一下。

下面放相关代码:
 

function  ToggleAppAndH5( AppUrl , AppCallback = () => {}){
             // 先走APP
            const ifr = document.createElement('iframe');
                ifr.src = AppUrl;
                ifr.style.display = 'none';
                document.body.appendChild(ifr);
                setTimeout(function(){
                    document.body.removeChild(ifr);
                }, 3000);
            
                  // 800毫秒后调用H5链接
                let timer = setTimeout(function () {
                        clearTimeout(timer);
                        AppCallback();
                }, 800);
        
                window.onblur = function () {
                    clearInterval(timer);
                };
         }

        function Callback(){
           // 这里放相关H5链接
           if (mapType === 'baidu') {
              frameDom.attr('src', "http://api.map.baidu.com/direction?origin=latlng:"+  curLat +","+ curLng +"|name:"+ currAddr +"&destination=latlng:"+  elat +","+ elng +"|name:"+ eaddr +"®ion="+ cityName +"&mode=driving&output=html&src=com.youbei.chefu");
           } else if (mapType === 'amap') {
              frameDom.attr('src', "https://ditu.amap.com/dir?type=car&from[lnglat]="+ curLng +","+ curLat +"&from[name]="+currAddr+"&to[lnglat]="+ elng +","+ elat +"&to[name]="+eaddr+"&src=com.youbei.chefu");
           }
         }

         const u = navigator.userAgent;
         const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

1. 高德

// 苹果和安卓头部不一样
   let proto = isiOS ? 'iosamap://path' : 'amapuri://route/plan'  ;

   const AppUrl = proto + "?t= 0&slat="+curLat+"&slon="+curLng+"&sname="+currAddr+"&dlat="+elat+"&dlon="+elng+"&dname="+eaddr+"&src=xxx";

   ToggleAppAndH5(AppUrl,Callback)

2.百度

// 苹果和安卓头部不一样
   let proto = isiOS ? 'baidumap://'  : 'bdapp://' 

   const AppUrl = proto +  "map/direction?region="+cityName+"&origin=latlng:"+ curLat+","+ curLng +"|name:"+ currAddr +"&destination=latlng:"+ elat +","+ elng +"|name:"+ eaddr +"&coord_type=bd09ll&mode=driving&src=com.youbei.chefu";
   
   ToggleAppAndH5(AppUrl, Callback)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 #HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 #HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 #HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 #HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 #HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 #HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 #HTML / CSS
You might like
投票管理程序
2006/10/09 PHP
生成卡号php代码
2008/04/09 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
单位消防安全制度
2014/01/12 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
光荣之路观后感
2015/06/12 职场文书
工作证明书
2015/06/15 职场文书
车间班组长竞聘书
2015/09/15 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle