Explication de l'exemple de 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 sauf accord de l'utilisateur.

Prise en charge des navigateurs

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

Remarque : la géolocalisation est requise pour ceux qui possèdent des appareils GPS, tels que l'iPhone. , disposer d'une géolocalisation plus précise.

HTML5 - Utilisation de la géolocalisation

Veuillez utiliser la méthode getCurrentPosition() pour obtenir l'emplacement 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

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

Exemple d'analyse :

Vérifiez si la géolocalisation est prise en charge

Si elle est prise 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, un objet coordonnées est renvoyé à la fonction spécifiée dans le paramètre showPosition

La fonction showPosition() obtient et affiche la longitude et la latitude

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

Afficher les résultats sur la carte

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;
    }
  }

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

Dans l'exemple ci-dessus, nous utilisons les données de latitude et de longitude renvoyées pour afficher l'emplacement dans Google Maps (en utilisant 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é.

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=&#39;"+img_url+"&#39;>";
}

Exemple :

Mettre à jour les informations locales

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

Système de navigation automobile interactif (GPS)

getCurrentPosition () - Renvoie les données

T En 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.

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 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 (comme un iPhone) :

[Recommandations associées]

1

Spécialement recommandé<. 🎜>

 :

Téléchargement de la version "php Programmer Toolbox" V0.1

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

2. Tutoriel vidéo en ligne h5 gratuit

3 Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!