Implementation example of waking up Baidu and Amap APP in Html5

A few days ago, United Black Card reported a need to open Baidu APP or Amap APP in H5, so I checked the relevant documents online and put the links below: 1. Amap 2. Baidu Map

The specific idea is that when clicking to select a map, first request the APP link. If there is no response after 800 milliseconds, then jump to the H5 link. The disadvantage of this approach is that it will jump to the H5 link regardless of whether it jumps to the APP or not. If you have any good ideas, please comment.

Below is the relevant code:

 function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ // Go to APP first const ifr = document.createElement('iframe'); ifr.src = AppUrl; ifr.style.display = 'none'; document. body.appendChild(ifr); setTimeout(function(){ document.body.removeChild(ifr); }, 3000); // Call H5 link after 800 milliseconds let timer = setTimeout(function () { clearTimeout(timer); AppCallback(); }, 800); window.onblur = function () { clearInterval(timer); }; } function Callback( ){ // Put relevant H5 links here 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 terminal

1. Gaode

 // Apple and Android headers are different 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. Baidu

 // Apple and Android headers are different 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)

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.