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教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 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中include()与require()的区别说明
2017/02/14 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
javascript 写类方式之五
2009/07/05 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python中扩展包的安装方法详解
2017/06/14 Python
python生成excel的实例代码
2017/11/08 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
写自荐信的注意事项
2014/03/09 职场文书
高校教师自荐信范文
2014/03/13 职场文书
出纳担保书范文
2014/04/02 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
一行Python命令实现批量加水印
2022/04/07 Python