So rufen Sie die Baidu Map App in HTML5 auf

Kürzlich habe ich eine Anforderung übernommen, die eine Hybridentwicklung erfordert. Nachdem das Frontend mit h5 erstellt wurde, kann die Seite in iOS und Android eingebettet werden. Dazu ist die Verwendung der Kartennavigation auf Baidu Maps erforderlich. Die spezifischen Funktionspunkte sind wie folgt:

Wenn Baidu Map auf dem Mobiltelefon (iOS, Android) installiert ist, klicken Sie auf die Navigationsschaltfläche, um die Baidu Map-App aufzurufen

Andernfalls öffnen Sie die Webseite Baidu Map Navigation

Der API-Dokumentlink von Baidu Map, der verwendet werden muss, lautet wie folgt: http://lbsyun.baidu.com/index.php?title=uri/api/ios

Erster Code:

 // Versuchen Sie, die Baidu-Karten-App aufzurufen. window.location.href = scheme; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); / / Wenn die Baidu Map-App erfolgreich aktiviert wurde, kehren Sie zur h5-Seite zurück. Zu diesem Zeitpunkt muss endTime - startTime größer als timeout + 200 sein. Wenn die Aktivierung fehlschlägt, öffnen Sie die Baidu Map-Navigation auf der Website, wenn (!startTime). ||. (endTime - startTime) < (timeout + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html' } ; ;

Frage:

Es gibt kein Problem, wenn der obige Code auf dem Android-Computer ausgeführt wird, aber der setTimeout-Timer wird immer auf iOS ausgeführt. Wenn er sich also auf der iOS-Seite befindet, wird der h5-Code der App auch dann ausgeführt, wenn sie im Hintergrund läuft.

Wir müssen also den Weg ändern.

1. Verwendung der Polling-Methode
2. Versuchen Sie, die Baidu Map-App innerhalb von 600 ms zu aktivieren. Nachdem die Aktivierung fehlgeschlagen ist, stellen Sie fest, ob sich h5 im Vordergrund oder im Hintergrund befindet. Öffnen Sie die webseitige Baidu Map-App. Unabhängig davon, ob die Erregung erfolgreich war oder nicht, wird der Timer nach 200 ms gelöscht.

Geänderter Code:

 var startTime = Date.now(); var count = 0; var t = setInterval(function () { count += 1; endTime = Date.now() - startTime; if (endTime > 800) { clearInterval(t); } if (count < 30) return; if (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html', 20);

Vollständiger Code:

 function wakeBaidu() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (result) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; //erhaltener Breitengrad var lngCurrent = result.point.lng; //Längengrad erhalten, wenn (latCurrent && lngCurrent) { var scheme = ''; // urlObject ist mein Adressleisten-Abfrageparameterobjekt var queryStr = '?origin=name:my location|latlng:' + latCurrent + ',' + lngCurrent + '&destination=' + urlObject. lat + ',' + urlObject.lng + '&region=' + urlObject.city + '&coord_type=bd09ll&mode=driving'; if (isIOS()) { // ios scheme = 'baidumap://map/direction' + queryStr } else { // android scheme = 'bdapp://map/direction ' + queryStr; } // Hauptimplementierungscode window.location.href = scheme; var startTime = Date.now(); endTime = 0; var t = setInterval(function () { count += 1; endTime = Date.now() - startTime; if (endTime > 800) { clearInterval(t); } if (count < 30) return; if (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; } }, 20); window.onblur = function () { clearInterval(t } }; }) ;

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.