HTML 5 Géolocalisation Repérez la position géographique de l'utilisateur

Géolocalisation HTML5 est utilisé pour localiser la position d'un utilisateur .
L'API de géolocalisation: HTML5 est utilisé pour obtenir la position géographique d'un utilisateur.
Puisque cela peut compromettre la confidentialité des utilisateurs, la position n'est disponible que si l'utilisateur l'approuve.

L'API de géolocalisation en HTML5

HTML5 cours tutorial Navigateurs pris en charge

Internet Explorer Firefox Opéra Google Chrome Safari

Internet Explorer 9, Firefox, Chrome, Safari et Opera soutiennent Géolocalisation.

Remarque: La géolocalisation est beaucoup plus précis pour les appareils avec GPS, comme l'iPhone.

HTML5 - Utilisation de géolocalisation

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

L'exemple ci-dessous est un exemple de géolocalisation simple renvoyant la position de l'utilisateur:

Exemple Avoir les coordonnes (la latitude et la longitude) de la position de l'utilisateur:

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  <title>HTML5 géolocalisation</title>
 
</head>
<body>
<p id="demo">Click sur le boutton pour voir vos coordonées:</p>
<button onclick="getLocation()">Montrer moi</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation n’est pas prise en charge par ce navigateur.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;    
  }
</script>
</body>
</html>
 

Explication  de l'exemple :

  • Vérifiez si géolocalisation est prise en charge
  • Si elle est supportée, exécutez la méthode GetCurrentPosition (). Sinon, en affichant un message à l'utilisateur
  • Si la méthode GetCurrentPosition() réussit, elle retourne un objet coordonnées pour la fonction spécifiée dans le paramètre (ShowPosition)
  • Le ShowPosition () récupère l'affiche de 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 rejets

Le second paramètre de la méthode GetCurrentPosition () est utilisée pour gérer les erreurs. Elle spécifie une fonction à exécuter si elle ne parvient pas à obtenir l'emplacement de l'utilisateur:

Exemple

Sélectionner le code

<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  <title>HTML5 géolocalisation</title>
 
</head>
<body>
<p id="demo">Click sur le boutton pour voir vos coordonées:</p>
<button onclick="getLocation()">Montrer moi</button>
 
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
   
navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation n’est pas prise en charge par ce navigateur.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +"<br>Longitude: " + position.coords.longitude;    
  }
function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="localisation non autorisé par l'utilisateur."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="L'information sur la localisation et indisponible."
      break;
    case error.TIMEOUT:
      x.innerHTML="le temps de réponce est dépasé."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Une erreur inconu a été rencontrée."
      break;
    }
  }
</script>
</body>
</html>
 

Codes d'erreur:

  • PERMISSION_DENIED - L'utilisateur n'a pas permis la géolocalisation
  • POSITION_UNAVAILABLE  - Il n'est pas possible d'obtenir l'emplacement actuel
  • TIMEOUT – Le temps a expiré

Affichage du résultat dans une carte

Pour afficher le résultat dans une carte, vous devez avoir accès à un service de carte qui peut utiliser la latitude et la longitude, comme Google Maps:

Exemple

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  <title>HTML5 géolocalisation</title>
 
</head>
<body>
<p id="demo">Click sur le boutton pour voir vos coordonées:</p>
<button onclick="getLocation()">Montrer
moi</button><br /><br />
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
   
navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation n’est pas prise en charge par ce navigateur.";}
  }
 
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+"'>";
  }
 
function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="localisation non autorisé par l'utilisateur."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="L'information sur la localisation et indisponible."
      break;
    case error.TIMEOUT:
      x.innerHTML="le temps de réponce est dépasé."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Une erreur inconu a été rencontrée."
      break;
    }
  }
</script>
</body>
</html>
 

Dans l'exemple ci-dessus, nous utilisons la latitude et de la longitude retourné pour montrer l'emplacement sur une carte Google (en utilisant une image statique).

Google Map Script

Comment utiliser un script pour afficher une carte interactive avec un marqueur, options de zoom et de traînée.

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  <title>HTML5 géolocalisation</title>
 
</head>
<body>
<p id="demo">Click sur le boutton pour voir vos coordonées:</p>
<button onclick="getLocation()">Montrer
moi</button><br /><br />
<div id="mapholder"></div>
<script
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
   
navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML=" Geolocation n’est pas prise en charge par ce navigateur.";}
  }
function showPosition(position)
  {
  lat=position.coords.latitude;
  lon=position.coords.longitude;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';
  mapholder.style.width='500px';
 
  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
 
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new
google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new
google.maps.Marker({position:latlon,map:map,title:"You are
here!"});
  }
function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="localisation non autorisé par l'utilisateur."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="L'information sur la localisation et indisponible."
      break;
    case error.TIMEOUT:
      x.innerHTML="le temps de réponce est dépasé."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Une erreur inconu a été rencontrée."
      break;
    }
  }
</script>
</body>
</html>
 

Spécifique un lieu pour un utilisateur

Cette page a démontré comment  indiquer la position d'un utilisateur sur une carte. Cependant, géolocalisation est également très utile pour la localisation des informations spécifiques.

Exemples:

  • Information locale (point de vente par exemple)
  • Affichage des points d'intérêts à proximité de l'utilisateur
  • Navigation (GPS)

Méthode La GetCurrentPosition () - Données de retour

Le GetCurrentPosition() retourne un objet si elle réussi. Les propriétés de la latitude, la longitude et la précision sont toujours retournés. Les autres propriétés ci-dessous sont retournées si elles sont disponibles.

Propriété

Description

coords.latitude

La latitude comme un nombre décimal

coords.longitude

La longitude comme un nombre décimal

coords.accuracy

La précision de la position

coords.altitude

L'altitude en mètres au dessus du niveau moyen de la mer

coords.altitudeAccuracy

La précision de l'altitude de la position

coords.heading

La position en degrés vers la droite à partir du Nord

coords.speed

La vitesse en mètres par seconde

timestamp

La date / heure de la réponse


Objet Géolocalisation - Autres méthodes intéressantes

watchPosition() - Retourne la position courante de l'utilisateur, et continue de retourner la position mise à jour lorsque 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 cette méthode (comme l'iPhone):

Exemple Sélectionner le code

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML=" Geolocation n’est pas prise en charge par ce
navigateur.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;         
  }
</script>
 
Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant