Comment utiliser correctement la géolocalisation HTML en HTML5 ?

Il ne fait aucun doute que HTML5 est un sujet brûlant pour les développeurs. Si vous avez besoin de comprendre rapidement les principes de base des fonctions HTML5, cet article explique principalement la géolocalisation HTML5.

Utilisations de la 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 vie privée 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 9, Firefox, Chrome, Safari et Opera prennent en charge la géolocalisation.

Remarque : La géolocalisation est plus précise pour les appareils dotés d'un GPS, comme l'iPhone.

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 simple de géolocalisation qui renvoie la longitude et la latitude de l'emplacement de l'utilisateur.

Voici des exemples :

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

Explication des exemples :

Détecter si la géolocalisation est prise en charge

Si prise en charge, exécutez 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.

Gestion des erreurs et des rejets

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

Il existe également une instance :

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      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;
    }
  }

Code d'erreur :

Autorisation refusée - La géolocalisation n'est pas autorisé pour l'utilisateur

Position indisponible - Impossible d'obtenir la position actuelle

Timeout - Délai d'expiration de l'opération

Afficher les résultats sur la carte

Si nécessaire dans la carte Pour afficher les résultats, vous devez accéder à un service de cartographie pouvant utiliser la latitude et la longitude, comme Google Maps ou Baidu Maps :

Il existe également des exemples :

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

Dans l'exemple ci-dessus, nous utilisons les données de latitude et de longitude renvoyées. Afficher l'emplacement dans Google Maps (en utilisant une image statique).

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

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

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. Si disponibles, les autres propriétés suivantes sont renvoyées.

Attributs et descriptions :

coords.latitude (latitude sous forme de nombre décimal)

coords.longitude (longitude sous forme de nombre décimal)

coords. précision (précision de la position)

coords.altitude (élévation, en mètres au-dessus du niveau de la mer)

coords.altitudeAccuracy (précision de l'élévation de la position)

coords.heading (direction , à partir du nord géographique en degrés)

coords.speed (vitesse en mètres par seconde)

horodatage (date/heure de réponse)

Objet de géolocalisation - autre Intéressant méthode

watchPosition() - renvoie la position actuelle de l'utilisateur et continue de renvoyer la position mise à 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) :

Il existe des exemples :

<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

[Recommandations associées]

L'historique du développement du HTML et du HTML5

Les éléments de base du HTML, vous permettant d'apprendre le HTML à partir de zéro

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!