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 renvoyer 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>

Essayer par 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 renvoie un objet coordinates à la fonction spécifiée dans 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 très basique, 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 spécifie 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;
    }
  }

Essayer par vous-même

Error code:

  • Permission denied - User does not allow geolocation
  • Position unavailable - Unable to 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+"' />";
}

Essayer par 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 following link shows you how to use a script to display an interactive map with markers, zoom, and drag options.

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.

Example:

  • Update local information
  • Display points of interest around the user
  • Interactive Vehicle Navigation System (GPS)

getCurrentPosition() Method - Return Data

If successful, the getCurrentPosition() method returns an object. It will always return latitude, longitude, and accuracy attributes. If available, it will also return the following attributes.

Attribute 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/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 en déplacement (comme un GPS dans une voiture).

clearWatch() - Arrêter 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>

Essayer par vous-même