Html5에서 Baidu 및 Amap APP를 깨우는 구현 예

며칠 전 United Black Card에서 H5에서 Baidu APP 또는 Amap APP을 열어야 한다고 보고하여 온라인으로 관련 문서를 확인하고 아래 링크를 걸어 두었습니다. 1. Amap 2. Baidu Map

구체적인 아이디어는 지도를 선택하기 위해 클릭할 때 먼저 APP 링크를 요청하고 800밀리초 후에도 응답이 없으면 H5 링크로 점프한다는 것입니다. 이 접근 방식의 단점은 APP로 점프하는지 여부에 관계없이 H5 링크로 점프한다는 것입니다. 좋은 아이디어 있으시면 댓글 부탁드립니다.

아래는 관련 코드입니다.

 function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ // 먼저 앱으로 이동 const ifr = document.createElement('iframe') ifr.src = AppUrl = 'none'; .body.appendChild(ifr); setTimeout(function(){ document.body.removeChild(ifr); }, 3000); // 800밀리초 후에 H5 링크를 호출합니다. lettimer = 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[이름]=+eaddr+&src=com.youbei.chefu) } } const u = navigator.userAgent; const isiOS = !!u.match(//(i[^;]+;( U;)? CPU.+Mac OS X/); //ios 터미널

1. 가오데

 // Apple과 Android 헤더가 다릅니다. 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,콜백)

2. 바이두

 // Apple과 Android 헤더가 다릅니다. let proto = isiOS ? 'baidumap://' : 'bdapp://' const AppUrl = proto + map/direction?region=+cityName+&origin=latlng:+ curLat+,+ curLng + |이름:+ currAddr +&destination=latlng:+ elat +,+ elng +|이름:+ eaddr +&coord_type=bd09ll&mode=driving&src=com.youbei.chefu; ToggleAppAndH5(AppUrl, 콜백)

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.