Implémenter un suivi de distance à l'aide de la géolocalisation HTML5

La géolocalisation HTML5 est utilisée pour localiser l'emplacement de l'utilisateur. Alors comment mettre en place un tracker de distance ? Mon idée est la suivante. Le principe est que le navigateur prend en charge la géolocalisation h5. Sur cette base, la position de l'utilisateur est obtenue, la position de l'utilisateur est mise à jour, la distance est calculée et affichée sur la page. simplement implémenté pour le rendre plus clair pour les utilisateurs. Vous pouvez voir directement l'emplacement actuel, qui est connecté à l'API Baidu Map.

La structure des pages est la suivante :

 <div id=container> <section> <article> <header> <h1>Votre emplacement</h1> </header> <p class=info id=status>Votre navigateur ne prend pas en charge la géolocalisation HTML5. </p> <div class=geostatus> <p id=latitude>Latitude : </p> <p id=longitude>Longitude : </p> <p id=accuracy>Précision : </p> <p id = timestamp>Horodatage : </p> <p id=currDist>Distance actuelle du trajet : </p> <p id=totalDist>Distance totale du trajet : </p> </div> </article> </section> <!-- Affichage de l'emplacement sur la carte Baidu--> <div id=allmap></div> </div>

Déterminer si le navigateur prend en charge la géolocalisation HTML5

La méthode loadDemo() est appelée lorsque le corps est chargé. La méthode détermine si le navigateur prend en charge la géolocalisation HTML5 en fonction de navigator.geolocation ; si navigator.geolocation est vrai, nous pouvons alors commencer à obtenir et mettre à jour l'emplacement de l'utilisateur ;

HTML5 peut obtenir la position de l'utilisateur via la méthode getCurrentPosition(). Mais cela n'est obtenu qu'une seule fois, nous avons donc choisi la méthode watchPosition(), qui peut renvoyer la position actuelle de l'utilisateur et continuer à renvoyer la position mise à jour lorsque l'utilisateur bouge (un peu comme le GPS d'une voiture).

 navigator.geolocation.watchPosition(updateLocation, handleLocationError, { timeout : 10000 });

Tout en obtenant continuellement l'emplacement, la méthode updateLocation est appelée pour afficher l'emplacement sur la page. Bien entendu, la méthode de calcul de distance est également appelée pour obtenir la distance, et l'emplacement sur la carte Baidu est constamment mis à jour.

 var latitude = position.coords.latitude;var longitude = position.coords.longitude;var précision = position.coords.accuracy;var timestamp = position.timestamp;document.getElementById(latitude).innerHTML = latitude: + latitude;document. getElementById(longitude).innerHTML = longitude : + longitude;document.getElementById(accuracy).innerHTML = précision: + précision;document.getElementById(timestamp).innerHTML = timestamp: + timestamp;if(précision >= 30000) { updateStatus(Besoin de valeurs plus précises pour calculer la distance. ); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = distance(latitude, longitude, lastLat, lastLong); document.getElementById(currDist).innerHTML = Distance actuelle : + currentDistance.toFixed(2) + km; totalDistance += currentDistance; innerHTML = distance totale parcourue : + currentDistance.toFixed(2) + km updateStatus(Location; mis à jour avec succès.);}lastLat = latitude;lastLong = longitude;

Mettez la longitude et la latitude de la position de départ et la position actuelle dans la fonction comme paramètres, et calculez la distance (unité : km) par conversion

 Number.prototype.toRadians = function() { return this * Math.PI / 180; }function distance(latitude1, longitude1, latitude2, longitude2) { var R = 6371; var deltaLatitude = (latitude2 - latitude1).toRadians(); var deltaLongitude = (longitude2 - longitude1).toRadians(); latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math .sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2); 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c;

Pour utiliser l'API Baidu Map, vous devez créer un compte Baidu, postuler pour devenir développeur Baidu et obtenir une clé pour utiliser les services associés. Selon la documentation, vous pouvez savoir comment utiliser cette API. Le code est le suivant :

 var map = new BMap.Map(allmap); //Créer une instance de carte map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //Définir les coordonnées du point central et le niveau de la carte map.addControl(new BMap); .MapTypeControl ()); //Ajouter un contrôle de type de carte map.setCurrentCity(Nanchang); //Afficher la ville, cet élément doit être défini map.enableScrollWheelZoom(true); //Activer le zoom avec la molette de la souris//Ce qui suit est le paramètre actuel de l'étiquette d'emplacement var point = new BMap.Point(longitude, latitude); (point, 14 ); var marqueur = new BMap.Marker(point); //Créer un marqueur map.addOverlay(marker); //Ajouter des marqueurs à la carte Marker.setAnimation(BMAP_ANIMATION_BOUNCE); //Animation de rebond//Fonction API de la carte Baidu-------------end

 <script type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=your key></script>

Ce qui précède est l'introduction de l'éditeur à l'utilisation de la géolocalisation HTML5 pour implémenter un suivi de distance. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !