API de géolocalisation Web

Localiser la position de l'utilisateur

L'API HTML Geolocation est utilisée pour obtenir la localisation de l'utilisateur.

En raison de ce qui pourrait nuire à la vie privée, la localisation n'est pas disponible sans l'approbation de l'utilisateur.

Essayer vous-même

Remarque :La géolocalisation est la plus précise pour les appareils équipés de GPS (comme les smartphones).

Tous les navigateurs prennent en charge l'API de géolocalisation :

Chrome IE Firefox Safari Opera
Prise en charge Prise en charge Prise en charge Prise en charge Prise en charge

Remarque :Depuis Chrome 50, l'API de géolocalisation ne sera applicable qu'aux contextes sécurisés, par exemple HTTPS. Si votre site est hébergé sur une source non sécurisée (par exemple HTTP), la demande pour obtenir la position de l'utilisateur ne fonctionnera plus.

Utilisation de l'API de géolocalisation

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

L'exemple suivant retourne la latitude et la longitude de la position de l'utilisateur :

<script>

const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(showPosition);
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "La géolocalisation n'est pas prise en charge par ce navigateur.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude : " + position.coords.latitude +
  "Longueur : " + position.coords.longitude;
}
</script>

Essayer vous-même

Explication de l'exemple :

  1. Vérifiez si la géolocalisation est prise en charge
  2. Si la méthode getCurrentPosition() est prise en charge, exécutez-la. Sinon, affichez un message à l'utilisateur
  3. Si la méthode getCurrentPosition() réussit, elle retourne un objet coordinates au paramètre de la fonction (showPosition) spécifiée
  4. 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.

Gérer les erreurs et les refus

getCurrentPosition() Le deuxième paramètre de la méthode est utilisé pour gérer les erreurs. Si la position de l'utilisateur ne peut pas être obtenue, il spécifie la fonction à exécuter :

<script>

function showError(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 position de l'utilisateur a expiré."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Une erreur inconnue s'est produite."
      break;
  }
}

Essayer vous-même

Afficher les résultats sur la carte

Pour afficher les résultats sur la carte, vous devez accéder aux services de carte, par exemple Google Maps.

Dans l'exemple suivant, la latitude et la longitude retournées sont utilisées pour afficher la position sur Google Maps (en utilisant une image statique) :

<script>

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 à la position

Cette page démontre comment afficher la position de l'utilisateur sur une carte.

Geolocation est également très utile pour les informations spécifiques à la position, par exemple :

  • Informations locales les plus récentes
  • Afficher les points d'intérêt proches de l'utilisateur
  • Navigation itérative (Turn-by-turn navigation) (GPS)

Méthode getCurrentPosition() - Données retournées

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

Propriétés Retourner
coords.latitude Latitude exprimée en nombre décimal (toujours retourne).
coords.longitude Longitude exprimée en nombre décimal (toujours retourne).
coords.accuracy Précision de la position (toujours retourne).
coords.altitude Hauteur au-dessus du niveau moyen de la mer (en mètres) (si disponible, retourne).
coords.altitudeAccuracy Précision de l'altitude de la position (si disponible, retourne).
coords.heading Cap en sens horaire à partir du nord (si disponible, retourne).
coords.speed Vitesse en mètres par seconde (si disponible, retourne).
timestamp Date et heure de la réponse (si disponible, retourne).

Méthodes intéressantes de l'objet Geolocation

L'objet Geolocation dispose d'autres méthodes intéressantes :

  • Méthode. Vous avez besoin d'un appareil GPS précis pour tester (par exemple, un smartphone) : - Retourner la position actuelle de l'utilisateur, et continuer à retourner les positions mises à jour en fonction du déplacement de l'utilisateur (comme un GPS dans une voiture).
  • clearWatch() - Arrêter la méthode watchPosition ()。

watchPosition() Méthode. Vous avez besoin d'un appareil GPS précis pour tester (par exemple, un smartphone) : Exemples

<script>

const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(showPosition);
    else {
  }
    x.innerHTML = "La géolocalisation n'est pas prise en charge par ce navigateur.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude : " + position.coords.latitude +
  "Longueur : " + position.coords.longitude;
}
</script>

Essayer vous-même