Comment invoquer l'application Baidu Map en HTML5

Récemment, j'ai repris une exigence qui nécessite un développement hybride. Une fois le front-end terminé avec h5, la page peut être intégrée dans iOS et la navigation cartographique de Baidu Map doit être utilisée. Les points de fonction spécifiques sont les suivants :

Si Baidu Map est installé sur le téléphone mobile (ios, Android), cliquez sur le bouton de navigation pour appeler l'application Baidu Map.

Sinon, ouvrez Baidu Map Navigation côté Web.

Le lien vers le document API de Baidu Map qui doit être utilisé est le suivant : http://lbsyun.baidu.com/index.php?title=uri/api/ios

Premier code :

 // Essayez d'invoquer l'application Baidu Map window.location.href = schéma; var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); / / Quand Après avoir activé avec succès l'application Baidu Map, revenez à la page h5. À ce moment, endTime - startTime doit être supérieur à timeout + 200 ; si l'activation échoue, ouvrez la navigation sur la carte Baidu côté Web si (!startTime). || (endTime - startTime) < (timeout + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html' } }, délai d'attente) ;

question:

Il n'y a aucun problème avec le code ci-dessus exécuté sur la machine Android, mais le timer setTimeout est toujours exécuté sur iOS, donc s'il est du côté iOS, même si l'application est en arrière-plan, son code h5 sera toujours exécuté.

Il faut donc changer de manière de procéder. L'idée générale est la suivante :

1. Utilisation de la méthode d'interrogation
2. Essayez d'activer l'application Baidu Map dans les 600 ms. Après l'échec de l'activation, déterminez si h5 est au premier plan ou à l'arrière-plan. S'il est au premier plan, ouvrez l'application Web Baidu Map. Que l'activation ait réussi ou échoué, le temporisateur est effacé après 200 ms.

Code modifié :

 var startTime = Date.now(); var count = 0; var 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 );

Code complet :

 function wakeBaidu() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (result) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; //obtenu Latitude var lngCurrent = result.point.lng; //obtenu la longitude si (latCurrent && lngCurrent) { var schéma = ''; // urlObject est mon objet de paramètre de requête de barre d'adresse var queryStr = '?origin=name:my location|latlng:' + latCurrent + ',' + lngCurrent + '&destination=' + urlObject. lat + ',' + urlObject.lng + '&region=' + urlObject.city + '&coord_type=bd09ll&mode=driving'; if (isIOS()) { // schéma ios = 'baidumap://map/direction' + queryStr; } else { // schéma android = 'bdapp://map/direction' + queryStr; } // Code d'implémentation principal window.location.href = schéma; 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 }; } else { alert('Impossible d'obtenir le positionnement, veuillez vérifier les paramètres de positionnement du téléphone mobile'); }) ; }

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.