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 le suivre lorsqu'il se déplace, toujours avec son autorisation. Cette fonctionnalité peut être utilisée dans les requêtes des utilisateurs, par exemple pour guider quelqu'un vers un point de destination. Il peut également être utilisé pour ajouter des "balises géographiques" à certains contenus créés par l'utilisateur, par exemple pour indiquer l'endroit où une photo a été prise. L'API est indépendante de l'appareil. Elle ne se soucie pas 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 via le GPS, le Wi-Fi ou simplement en demandant à l'utilisateur de saisir manuellement sa position. Étant donné que chacune de ces recherches prendra 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, il s'agit d'un odomètre qui affiche la position initiale et la distance parcourue depuis le chargement de la page.

Étape 1 : Vérifier la compatibilité

Vous pouvez facilement vérifier la compatibilité en vérifiant 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 du compteur kilométrique

Dans cet exemple, vous créez un compteur kilométrique. Déclarez donc 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>

Les prochaines étapes utiliseront l'API Geolocation pour renseigner toutes ces sections vides.

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

getCurrentPosition() fournit des informations de manière asynchrone sur la position actuelle de l'utilisateur. Appelez-le dès que la page se charge, afin qu'il renseigne correctement la position de départ et l'enregistre pour plus tard:

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 sur ce domaine demande des autorisations, le navigateur vérifie généralement l'autorisation de l'utilisateur. Selon le navigateur, il peut également exister des préférences permettant de toujours autoriser ou d'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. En fonction de l'appareil de localisation utilisé par votre navigateur, l'objet de position peut contenir beaucoup plus que la latitude et la longitude, par exemple une altitude ou une direction. Vous pouvez aller plus loin en enregistrant la variable de position dans la console.

Étape 4 : Gérer les erreurs

Malheureusement, toutes les recherches d'établissements ne sont pas couronnées de succès. Il est possible qu'un GPS n'ait pas pu être localisé ou que l'utilisateur ait soudainement désactivé la recherche de position. Un deuxième argument facultatif pour getCurrentPosition() sera appelé en cas d'erreur afin que vous puissiez en informer 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(). Il avertit automatiquement une fonction de rappel chaque fois que l'utilisateur se déplace:

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;
}