HTML API de géolocalisation

L'API de géolocalisation permet d'obtenir la position actuelle de l'utilisateur.

Localiser la position de l'utilisateur

L'API de géolocalisation est utilisée pour accéder à la position actuelle de l'utilisateur.

Comme cela peut compromettre la vie privée, la localisation n'est pas disponible à moins que l'utilisateur ne l'approuve.

Remarque : L'API de géolocalisation n'est disponible que dans des contextes sécurisés tels que HTTPS.

Astuce : L'API de géolocalisation est la plus précise pour les appareils dotés de GPS, comme les smartphones ou les montres connectées.

Support des navigateurs

Les chiffres dans le tableau spécifient la première version du navigateur qui prend en charge la géolocalisation.

API
Géolocalisation	5.0	12.0	3.5	5.0	10.6

Utilisation de l'API de géolocalisation HTML

L'API de géolocalisation est accessible via un appel à navigator.geolocation . Cela amène le navigateur à demander à l'utilisateur la permission d'accéder à ses données de localisation. Si l'utilisateur accepte, le navigateur recherchera la meilleure fonctionnalité disponible sur l'appareil pour accéder à cette information (par exemple GPS).

La méthode getCurrentPosition() est utilisée pour retourner la position actuelle de l'utilisateur.

L'exemple ci-dessous retourne la latitude et la longitude de la position actuelle de l'utilisateur :

Exemple

 <script> 
 const x = document.getElementById("demo"); 
 
 function getLocation() { 
 if (navigator.geolocation) { 
 navigator.geolocation.getCurrentPosition(success, error); 
 } else { 
 x.innerHTML = "La géolocalisation n'est pas supportée par ce navigateur."; 
 } 
 } 
 
 function success(position) { 
 x.innerHTML = "Latitude: " + position.coords.latitude + 
 "<br>Longitude: " + position.coords.longitude; 
 } 
 
 function error() { 
 alert("Désolé, aucune position disponible."); 
 } 
 </script> 

Essayez-le vous-même »

Exemple expliqué :

Vérifiez si la géolocalisation est supportée
Si la géolocalisation est supportée, exécutez la méthode getCurrentPosition() . Sinon, affichez un message à l'utilisateur
La fonction success() affiche la position de l'utilisateur en latitude et longitude
La fonction error() affiche un message si le navigateur rencontre une erreur dans getCurrentPosition()

Gestion des erreurs et refus

Le deuxième paramètre de la méthode getCurrentPosition() est utilisé pour gérer les erreurs. Il spécifie une fonction à exécuter s'il échoue à obtenir la position de l'utilisateur.

Voici un exemple de gestion d'erreurs plus spécifique :

Exemple

 function error(error) { 
 switch(error.code) { 
 case error.PERMISSION_DENIED: 
 x.innerHTML = "L'utilisateur a refusé la demande de géolocalisation." 
 break; 
 case error.POSITION_UNAVAILABLE: 
 x.innerHTML = "Les informations de localisation ne sont pas disponibles." 
 break; 
 case error.TIMEOUT: 
 x.innerHTML = "La demande pour obtenir la localisation de l'utilisateur a expiré." 
 break; 
 case error.UNKNOWN_ERROR: 
 x.innerHTML = "Une erreur inconnue s'est produite." 
 break; 
 } 
 } 

Essayez-le vous-même »

Informations spécifiques à la localisation

La géolocalisation est également très utile pour des informations spécifiques à la localisation, comme :

Informations locales à jour
Affichage des points d'intérêt près de l'utilisateur
Navigation étape par étape (GPS)

La méthode getCurrentPosition() - Données de retour

La méthode getCurrentPosition() retourne un objet en cas de succès. Les propriétés latitude, longitude et précision sont toujours retournées. Les autres propriétés sont retournées si disponibles :

Propriété	Retourne
coords.latitude	La latitude sous forme de nombre décimal (toujours retournée)
coords.longitude	La longitude sous forme de nombre décimal (toujours retournée)
coords.accuracy	La précision de la position (toujours retournée)
coords.altitude	L'altitude en mètres au-dessus du niveau de la mer moyen (retournée si disponible)
coords.altitudeAccuracy	La précision de l'altitude de la position (retournée si disponible)
coords.heading	La direction en degrés dans le sens des aiguilles d'une montre par rapport au nord (retournée si disponible)
coords.speed	La vitesse en mètres par seconde (retournée si disponible)
timestamp	La date/heure de la réponse (retournée si disponible)

Objet de géolocalisation - Autres méthodes intéressantes

L'objet de géolocalisation possède également d'autres méthodes intéressantes :

watchPosition() - Retourne la position actuelle de l'utilisateur et continue de fournir des mises à jour de position à mesure que l'utilisateur se déplace (comme le GPS dans une voiture).
clearWatch() - Arrête la méthode watchPosition() .

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> 
 const x = document.getElementById("demo"); 
 
 function getLocation() { 
 if (navigator.geolocation) { 
 navigator.geolocation.watchPosition(success, error); 
 } else { 
 x.innerHTML = "La géolocalisation n'est pas supportée par ce navigateur."; 
 } 
 } 
 
 function success(position) { 
 x.innerHTML = "Latitude: " + position.coords.latitude + 
 "<br>Longitude: " + position.coords.longitude; 
 } 
 
 function error(error) { 
 switch(error.code) { 
 case error.PERMISSION_DENIED: 
 x.innerHTML = "L'utilisateur a refusé la demande de géolocalisation." 
 break; 
 case error.POSITION_UNAVAILABLE: 
 x.innerHTML = "Les informations de localisation ne sont pas disponibles." 
 break; 
 case error.TIMEOUT: 
 x.innerHTML = "La demande pour obtenir la localisation de l'utilisateur a expiré." 
 break; 
 case error.UNKNOWN_ERROR: 
 x.innerHTML = "Une erreur inconnue s'est produite." 
 break; 
 } 
 } 
 </script> 

Essayez-le vous-même »