API de géolocalisation Web
Localiser la position de l'utilisateur
L'API de géolocalisation HTML est utilisée pour obtenir la position géographique d'un utilisateur.
Comme cela peut compromettre la confidentialité, le poste n'est pas disponible à moins que l'utilisateur ne l'approuve.
Remarque : La géolocalisation est plus précise pour les appareils avec GPS, comme les smartphones.
L'API de géolocalisation est prise en charge dans tous les navigateurs :
| Yes | Yes | Yes | Yes | Yes |
Remarque : à partir de Chrome 50, l'API de géolocalisation ne fonctionnera que sur des contextes sécurisés tels que HTTPS. Si votre site est hébergé sur une origine non sécurisée (telle que HTTP), les requêtes pour obtenir l'emplacement des utilisateurs ne fonctionneront plus.
Utilisation de l'API de géolocalisation
La getCurrentPosition()méthode est utilisée pour renvoyer la position de l'utilisateur.
L'exemple ci-dessous renvoie la latitude et la longitude de la position de l'utilisateur :
Exemple
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Exemple expliqué :
- Vérifiez si la géolocalisation est prise en charge
- Si elle est prise en charge, exécutez la méthode getCurrentPosition(). Si ce n'est pas le cas, affichez un message à l'utilisateur
- Si la méthode getCurrentPosition() réussit, elle renvoie un objet de coordonnées à la fonction spécifiée dans le paramètre (showPosition)
- La fonction showPosition() affiche la latitude et la longitude
L'exemple ci-dessus est un script de géolocalisation très basique, sans gestion des erreurs.
Gestion des erreurs et des rejets
Le deuxième paramètre de la getCurrentPosition()méthode est utilisé pour gérer les erreurs. Il spécifie une fonction à exécuter si elle ne parvient pas à obtenir l'emplacement de l'utilisateur :
Exemple
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Affichage du résultat sur une carte
Pour afficher le résultat sur une carte, vous devez avoir accès à un service de carte, comme Google Maps.
Dans l'exemple ci-dessous, la latitude et la longitude renvoyées sont utilisées pour afficher l'emplacement dans une carte Google (à l'aide d'une image statique) :
Exemple
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Informations spécifiques à l'emplacement
Cette page a montré comment afficher la position d'un utilisateur sur une carte.
La géolocalisation est également très utile pour les informations spécifiques à l'emplacement, telles que :
- Informations locales à jour
- Affichage des points d'intérêt à proximité de l'utilisateur
- Navigation pas à pas (GPS)
La méthode getCurrentPosition() - Renvoie des données
La getCurrentPosition()méthode renvoie un objet en cas de succès. Les propriétés de latitude, de longitude et de précision sont toujours renvoyées. Les autres propriétés sont renvoyées si elles sont disponibles :
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
Objet de géolocalisation - Autres méthodes intéressantes
L'objet Geolocation possède également d'autres méthodes intéressantes :
watchPosition()- Renvoie la position actuelle de l'utilisateur et continue de renvoyer la position mise à jour lorsque l'utilisateur se déplace (comme le GPS dans une voiture).clearWatch()- Arrête lawatchPosition()méthode.
L'exemple ci-dessous montre la watchPosition()méthode. Vous avez besoin d'un appareil GPS précis pour tester cela (comme un smartphone):
Exemple
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>