Un simple compteur de distance à l'aide de l'API Geolocation

Michael Mahemoff

Introduction

L'API Geolocation vous permet de savoir où se trouve l'utilisateur et de garder un œil sur lui lorsqu'il se déplace, avec toujours son consentement. Cette fonctionnalité peut être utilisée dans les requêtes des utilisateurs, par exemple pour guider une personne vers une destination. Elle peut également être utilisée pour "géolocaliser" certains contenus créés par l'utilisateur, par exemple pour marquer le lieu de prise de vue d'une photo. L'API est indépendante de l'appareil. Elle ne tient pas compte de la manière dont le navigateur détermine la position, tant que les clients peuvent demander et recevoir des données de localisation de manière standard. Le mécanisme sous-jacent peut être par GPS, Wi-Fi ou simplement demander à l'utilisateur d'entrer sa position manuellement. Étant donné que l'une de ces recherches va prendre un certain temps, l'API est asynchrone. Vous lui transmettez une méthode de rappel chaque fois que vous demandez un emplacement.

Dans cet exemple, un compteur de distance indique la position initiale et indique la distance parcourue depuis le chargement de la page.

Étape 1. Vérifier la compatibilité

Vous pouvez facilement vérifier la compatibilité en testant la présence de l'objet de géolocalisation:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Étape 2. Déclarer le code HTML de l'outil de mesure du trajet

Dans cet exemple, vous créez un compteur de trajets. Vous devez donc déclarer le code HTML suivant:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

Au cours des prochaines étapes, vous allez utiliser l'API Geolocation pour renseigner tous ces segments vides.

Étape 3. Déterminer la position actuelle de l'utilisateur

getCurrentPosition() génère des rapports sur la position actuelle de l'utilisateur de manière asynchrone. Appelez-la dès le chargement de la page pour qu'elle se charge correctement (et enregistre pour plus tard) à la position de départ:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

Si c'est la première fois qu'une application de ce domaine demande des autorisations, le navigateur vérifie généralement le consentement de l'utilisateur. Selon le navigateur, il peut également y avoir des préférences visant à toujours autoriser (ou interdire) les recherches d'autorisations, auquel cas le processus de confirmation sera contourné.

Après avoir exécuté ce code, vous devriez pouvoir voir la position de départ. Selon l'appareil de localisation utilisé par votre navigateur, l'objet de position peut contenir bien plus que de la latitude et la longitude. Par exemple, il peut inclure une altitude ou une direction. Vous pouvez aller plus loin en consignant la variable "position" dans la console.

Étape 4. Gérer les erreurs

Malheureusement, toutes les recherches d'emplacement n'aboutissent pas. Peut-être qu’un GPS n’a pas pu être localisé ou que l’utilisateur a soudainement désactivé la recherche de position. Un deuxième argument facultatif de getCurrentPosition() sera appelé en cas d'erreur. Vous pourrez ainsi avertir l'utilisateur dans le rappel:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

Étape 5 : Surveiller la position de l'utilisateur

L'appel précédent à getCurrentPosition() n'a été exécuté qu'une seule fois, lors du chargement de la page. Pour suivre les modifications, utilisez watchPosition(). Une fonction de rappel est automatiquement envoyée à chaque déplacement de l'utilisateur:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Étape 6 : Afficher la distance parcourue

Cette étape n'est pas directement liée à l'API Geolocation, mais elle complète la démonstration et fournit un exemple d'utilisation des données de localisation. Ajoutez une ligne supplémentaire au gestionnaire watchPosition() pour renseigner la distance parcourue:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

La fonction calculateDistance() exécute un algorithme géométrique pour déterminer la distance entre deux coordonnées. L'implémentation JavaScript est adaptée d'un script fourni par Moveable Type sous une licence Creative Commons:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}