• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前几天,联合黑卡反馈了一个需求,需要在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 +"&region="+ 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)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
socket.io 和canvas 实现的共享画板功能发布时间:2022-06-21
下一篇:
Html5实现单张、多张图片上传功能发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap