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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
css3 文字断裂效果
Apr 22 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
隐性调用php程序的方法
2009/03/09 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
js 作用域和变量详解
2017/02/16 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python安装与使用redis的方法
2016/04/19 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
同时安装Python2 & Python3 cmd下版本自由选择的方法
2017/12/09 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python求最大值最小值方法总结
2019/06/25 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
高二地理教学反思
2014/01/24 职场文书
交通事故协议书
2014/04/15 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫