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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
angular 服务随记小结
2019/05/06 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python datetime包函数简单介绍
2019/08/28 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
哪些是python中web开发框架
2020/06/17 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
项目经理任命书内容
2014/06/06 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书