HTML API de géolocalisation
L'API HTML Geolocation est utilisée pour localiser la position d'un utilisateur.
Localisez la position de l'utilisateur
L'API HTML Geolocation est utilisée pour obtenir la position géographique d'un utilisateur.
Étant donné que 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 équipés d'un GPS, comme les smartphones.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la géolocalisation.
| API | |||||
|---|---|---|---|---|---|
| Géolocalisation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
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 la localisation de l'utilisateur ne fonctionneront plus.
Utiliser la géolocalisation HTML
La méthode getCurrentPosition() 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>
var 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>
Try it Yourself »
Exemple expliqué :
- Vérifiez si la géolocalisation est prise en charge
- Si cette fonctionnalité est prise en charge, exécutez la méthode getCurrentPosition(). Sinon, affichez un message à l'utilisateur
- Si la méthode getCurrentPosition() réussit, elle renvoie un objet 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 méthode getCurrentPosition() 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;
}
}
Try it Yourself »
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 à un emplacement, telles que :
- Informations locales à jour
- Affichage des points d'intérêt à proximité de l'utilisateur
- Navigation étape par étape (GPS)
La méthode getCurrentPosition() - Renvoie des données
La méthode getCurrentPosition() 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 disponibles :
| Propriété | Retours |
|---|---|
| coords.latitude | La latitude sous forme de nombre décimal (toujours renvoyé) |
| coords.longitude | La longitude sous forme de nombre décimal (toujours renvoyé) |
| coords.accuracy | La précision de la position (toujours renvoyée) |
| coords.altitude | L'altitude en mètres au-dessus du niveau moyen de la mer (renvoyée si disponible) |
| coords.altitudeAccuracy | La précision de l'altitude de la position (renvoyée si disponible) |
| coords.heading | Le cap en degrés dans le sens des aiguilles d'une montre à partir du nord (renvoyé si disponible) |
| coords.speed | La vitesse en mètres par seconde (renvoyée si disponible) |
| timestamp | La date/heure de la réponse (renvoyée si disponible) |
Objet de géolocalisation — Autres méthodes intéressantes
L'objet Géolocalisation 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 à mesure que l'utilisateur se déplace (comme le GPS dans une voiture).clearWatch()- Arrête la méthodewatchPosition().
L'exemple ci-dessous montre la méthode watchPosition(). Vous avez besoin d'un appareil GPS précis pour tester cela (comme un smartphone) :
Exemple
<script>
var 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>
Try it Yourself »
