API de géolocalisation
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.
Note
La géolocalisation est plus précise pour les appareils avec GPS, comme les smartphones.
Prise en charge du navigateur
L’API de géolocalisation est prise en charge dans tous les navigateurs :
Note
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
Le getCurrentPosition() La 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
const x = document.getElementById(« démo »);
fonction getLocation() {
si (navigateur.géolocalisation) {
navigator.geolocation.getCurrentPosition(showPosition);
} autre {
x.innerHTML = « La géolocalisation n’est pas prise en charge par ce navigateur. »;
}
}
function showPosition(position) {
x.innerHTML = « Latitude : » + position.coords.latitude +
«
Longitude : » + position.coords.longitude ;
}
Essayez-le vous-même »
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() La méthode est utilisée pour gérer les erreurs. Il spécifie une fonction à exécuter si elle ne parvient pas à obtenir l’emplacement de l’utilisateur :
Exemple
fonction showError (erreur) {
switch(error.code) {
erreur de cas.PERMISSION_DENIED :
x.innerHTML = « L’utilisateur a refusé la demande de géolocalisation. »
casser;
erreur de cas.POSITION_UNAVAILABLE :
x.innerHTML = « Les informations de localisation ne sont pas disponibles. »
casser;
erreur de cas.TIMEOUT :
x.innerHTML = « La demande d’obtention de la position de l’utilisateur a expiré. »
casser;
erreur de cas.UNKNOWN_ERROR :
x.innerHTML = « Une erreur inconnue s’est produite. »
casser;
}
}
Essayez-le vous-même »
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 ;
laissez img_url = « https://maps.googleapis.com/maps/api/staticmap?center=
« +latlon+ »&zoom=14&size=400×300&sensor=false&key=VOTRE_CLE » ;
document.getElementById(« mapholder »).innerHTML = « » ;
}
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() – Retourne des données
Le getCurrentPosition() La 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 :
| Propriété | Retour |
|---|---|
| coordonnées.latitude | La latitude sous forme de nombre décimal (toujours retourné) |
| coords.longitude | La longitude sous forme de nombre décimal (toujours renvoyée) |
| coords.précision | La précision de la position (toujours renvoyée) |
| coordonnées.altitude | L’altitude en mètres au-dessus du niveau moyen de la mer (renvoyée si disponible) |
| coords.altitudeAccuracy | La précision d’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) |
| coordonnées.vitesse | La vitesse en mètres par seconde (renvoyée si disponible) |
| horodatage | La date/heure de la réponse (renvoyée si disponible) |
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 lewatchPosition()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
Essayez-le vous-même »
#API #géolocalisation