Html5内唤醒百度、高德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 +&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)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。