nuqi6

H5内唤醒百度、高德APP 高德

摘要：有好的想法可以评论一下。下面放相关代码先走毫秒后调用链接这里放相关链接终端高德苹果和安卓头部不一样百度苹果和安卓头部不一样

前几天，联合黑卡反馈了一个需求，需要在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.百度