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 = () => {}){ // 最初に APP に移動します const ifr = document.createElement('iframe') ifr.src = AppUrl = 'none'; . 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) }; ){ // 関連する 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. ガオデ

 // 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,Callback)

2.百度

 // Apple と Android のヘッダーは異なります 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, コールバック)

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。