Html5内唤醒百度、高德APP的实现方法_F11 - 专业站长和开发者的学习网站

本篇文章介绍Html5内唤醒百度、高德APP的实现方法。

具体思路就是点击选择地图的时候，先去请求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)