思路就是点击选择地图的时候,先去请求APP链接,800毫秒后无响应,再跳转至H5链接。这样的做法有一点不好就是不管跳不跳APP,都会跳到H5的链接。有好的想法可以评论一下。
相关代码
1 function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ 2 // 先走APP 3 const ifr = document.createElement('iframe'); 4 ifr.src = AppUrl; 5 ifr.style.display = 'none'; 6 document.body.appendChild(ifr); 7 setTimeout(function(){ 8 document.body.removeChild(ifr); 9 }, 3000); 10 11 // 800毫秒后调用H5链接 12 let timer = setTimeout(function () { 13 clearTimeout(timer); 14 AppCallback(); 15 }, 800); 16 17 window.onblur = function () { 18 clearInterval(timer); 19 }; 20 } 21 22 function Callback(){ 23 // 这里放相关H5链接 24 if (mapType === 'baidu') { 25 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"); 26 } else if (mapType === 'amap') { 27 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"); 28 } 29 } 30 31 const u = navigator.userAgent; // 获取设备 32 const isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 33
1. 高德
1 // 苹果和安卓头部不一样 2 let proto = isiOS ? 'iosamap://path' : 'amapuri://route/plan' ; 3 4 const AppUrl = proto + "?t= 0&slat="+curLat+"&slon="+curLng+"&sname="+currAddr+"&dlat="+elat+"&dlon="+elng+"&dname="+eaddr+"&src=xxx"; 5 6 ToggleAppAndH5(AppUrl,Callback)
2.百度
1 // 苹果和安卓头部不一样 2 let proto = isiOS ? 'baidumap://' : 'bdapp://' 3 4 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"; 5 6 ToggleAppAndH5(AppUrl, Callback) 7
转载 https://segmentfault.com/a/1190000019211592?utm_source=tag-newest