Géolocalisation HTML5

HTML5 Geolocation (géolocalisation) est utilisé pour localiser la position de l'utilisateur.

Essayez-le vous-même : affichez votre position sur Google Maps

Localiser la position de l'utilisateur

L'API de géolocalisation HTML5 est utilisée pour obtenir la position géographique de l'utilisateur.

En raison de la possible violation de la vie privée de l'utilisateur, les informations de position de l'utilisateur ne sont pas disponibles sans l'accord de l'utilisateur.

Prise en charge du navigateur

Internet Explorer 9, Firefox, Chrome, Safari et Opera prennent en charge la géolocalisation.

Remarque :Pour les appareils équipés de GPS, comme l'iPhone, la géolocalisation est plus précise.

HTML5 - Utilisation de la géolocalisation

Utilisez la méthode getCurrentPosition() pour obtenir la position de l'utilisateur.

L'exemple suivant est une simple instance de géolocalisation qui peut retourner 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>

Essayez-le vous-même

Explication de l'exemple :

  • Détection de la prise en charge de la géolocalisation
  • Si cette méthode est prise en charge, exécutez la méthode getCurrentPosition(). Sinon, affichez un message à l'utilisateur.
  • Si getCurrentPosition() s'exécute avec succès, il retourne un objet coordinates à la fonction spécifiée par le paramètre showPosition
  • La fonction showPosition() obtient et affiche la latitude et la longitude

L'exemple ci-dessus est un script de géolocalisation de base, sans gestion des erreurs.

Gestion des erreurs et refus

Le deuxième paramètre de la méthode getCurrentPosition() est utilisé pour gérer les erreurs. Il détermine la fonction à exécuter lorsque la récupération de la position de l'utilisateur échoue :

Exemple

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="L'information de localisation n'est pas disponible."
      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;
    }
  }

Essayez-le vous-même

Error code:

  • Permission denied - User does not allow geolocation
  • Position unavailable - Cannot obtain current location
  • Timeout - Operation timed out

Display Results on Map

To display the results on a map, you need to access a map service that can use latitude and longitude, such as Google Maps or Baidu Maps:

Exemple

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Essayez-le vous-même

In the example above, we use the returned latitude and longitude data to display the location on Google Maps (using a static image).

Google Maps Script

The link above demonstrates how to use scripts to display an interactive map with options for markers, zoom, and drag.

Information about a given location

This page demonstrates how to display the user's location on a map. However, geolocation is also very useful for information about a given location.

Case:

  • Update local information
  • Display user's surrounding points of interest
  • Interactive Vehicle Navigation System (GPS)

getCurrentPosition() Method - Return Data

If successful, the getCurrentPosition() method returns an object. It always returns latitude, longitude, and accuracy properties. If available, it will return other properties below.

Property Description
coords.latitude Decimal degree latitude
coords.longitude Decimal degree longitude
coords.accuracy Location accuracy
coords.altitude Altitude, measured in meters above sea level
coords.altitudeAccuracy Précision de l'altitude de la position
coords.heading Direction, à partir du nord pour commencer en degrés
coords.speed Vitesse, en mètres par seconde
timestamp Date et heure de la réponse

Objet Geolocation - Autres méthodes intéressantes

watchPosition() - Retourne la position actuelle de l'utilisateur et continue de retourner les mises à jour de la position de l'utilisateur lorsqu'il se déplace (comme un GPS dans une voiture).

clearWatch() - Arrête la méthode watchPosition()

L'exemple suivant montre la méthode watchPosition(). Vous avez besoin d'un appareil GPS précis pour tester cet exemple (par exemple, iPhone) :

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>

Essayez-le vous-même