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武林網。