Implementierungsbeispiel für das Aufwecken der Baidu- und Amap-App in HTML5

Vor ein paar Tagen meldete United Black Card die Notwendigkeit, die Baidu APP oder Amap APP in H5 zu öffnen, also habe ich die relevanten Dokumente online überprüft und die folgenden Links eingefügt: 1. Amap 2. Baidu Map

Die konkrete Idee besteht darin, beim Klicken zum Auswählen einer Karte zuerst den APP-Link anzufordern. Wenn nach 800 Millisekunden keine Antwort erfolgt, springen Sie zum H5-Link. Der Nachteil dieses Ansatzes besteht darin, dass zum H5-Link gesprungen wird, unabhängig davon, ob zur APP gesprungen wird oder nicht. Wenn Sie gute Ideen haben, kommentieren Sie diese bitte.

Unten ist der relevante Code:

 function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ // Gehe zuerst zu APP const = document.createElement('iframe'); ifr.style.display = 'none'; . body.appendChild(ifr); setTimeout(function(){ document.body.removeChild(ifr); }, 3000); // H5-Link nach 800 Millisekunden aufrufen let timer = setTimeout(function () { clearTimeout(timer); AppCallback(); }, 800 = function () { clearInterval(timer }); ){ // Relevante H5-Links hier einfügen 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 isiOS = !!u.match(//(i[^;]+;( U;)? CPU.+Mac OS X/); //ios terminal

1. Gaode

 // Apple- und Android-Header sind unterschiedlich let proto = isiOS ? 'iosamap://path' : 'amapuri://route/plan' ; +currAddr+&dlat=+elat+&dlon=+elng+&dname=+eaddr+&src=xxx; ToggleAppAndH5(AppUrl,Callback)

2. Baidu

 // Apple- und Android-Header sind unterschiedlich 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;

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.