Géolocalisation HTML5


La géolocalisation HTML5 est utilisée pour localiser l'emplacement de l'utilisateur.

Localiser l'emplacement de l'utilisateur

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

Étant donné que cette fonctionnalité peut violer la confidentialité des utilisateurs, les informations de localisation de l'utilisateur ne sont pas disponibles sans le consentement de l'utilisateur.

Prise en charge des navigateurs

Internet Explorer

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

Remarque : Géolocalisation (géolocalisation) Pour les appareils dotés d'un GPS, tels que l'iPhone, la géolocalisation est plus précise.

HTML5 - Utilisation de la géolocalisation

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

L'exemple suivant est un exemple de géolocalisation simple qui renvoie la longitude et la latitude de l'emplacement de l'utilisateur :

Exemple

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;	
  }
</script>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Analyse de l'instance :

  • Vérifiez si la géolocalisation est pris en charge

  • Si pris en charge, exécutez la méthode getCurrentPosition(). S’il n’est pas pris en charge, un message s’affiche à l’utilisateur.

  • Si getCurrentPosition() s'exécute avec succès, renvoie un objet coordonnées à la fonction spécifiée dans le paramètre showPosition

  • la fonction showPosition() obtient et affiche Longitude et Latitude

L'exemple ci-dessus est un script de géolocalisation très basique sans gestion des erreurs.

Gestion des erreurs et des rejets

Le deuxième paramètre de la méthode getCurrentPosition() est utilisé pour gérer les erreurs. Il précise la fonction à exécuter en cas d'échec de l'obtention de la localisation de l'utilisateur :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;	
  }
function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }
</script>
</body>
</html>

Exécuter l'instance»

Cliquez Bouton "Exécuter l'instance" pour afficher les instances en ligne

Code d'erreur :

  • Autorisation refusée - L'utilisateur n'est pas autorisé à géolocaliser

  • Position indisponible - Impossible d'obtenir la position actuelle

  • Timeout - Timeout de l'opération

Afficher le résultat dans le map

as Pour afficher les résultats sur une carte, vous devez accéder à un service de cartographie pouvant utiliser la latitude et la longitude, tel que Google Maps ou Baidu Maps :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }

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="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }
</script>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Dans l'exemple ci-dessus, nous utilisons les données de latitude et de longitude renvoyées pour afficher l'emplacement dans Google Maps (à l'aide d'une image statique).

Script Google Maps
Le lien ci-dessus vous montre comment utiliser un script pour afficher une carte interactive avec des marqueurs, des options de zoom et de glissement.

Informations pour un emplacement donné

Cette page montre comment afficher l'emplacement de l'utilisateur sur une carte. Cependant, la géolocalisation est également utile pour obtenir des informations sur un emplacement donné.

Exemple :

  • Mettre à jour les informations locales

  • Afficher les points d'intérêt autour de l'utilisateur

  • Système de navigation automobile interactif (GPS)

Méthode getCurrentPosition() - renvoyer les données

TEn cas de succès, la méthode getCurrentPosition() renvoie l'objet . Les propriétés de latitude, de longitude et de précision sont toujours renvoyées. Si disponibles, les autres propriétés suivantes sont renvoyées.

属性描述
coords.latitude十进制数的纬度
coords.longitude十进制数的经度
coords.accuracy位置精度
coords.altitude海拔，海平面以上以米计
coords.altitudeAccuracy位置的海拔精度
coords.heading方向，从正北开始以度计
coords.speed速度，以米/每秒计
timestamp响应的日期/时间

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

watchPosition() - renvoie la position actuelle de l'utilisateur et continue de renvoyer les positions mises à jour à mesure que l'utilisateur se déplace (comme le GPS dans voiture).

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

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;	
  }
</script>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne