Latest web development tutorials

HTML5 géolocalisation

HTML5 Géolocalisation (géolocalisation) utilisé pour localiser l'emplacement de l'utilisateur.


Repérez la position de l'utilisateur

HTML5 Géolocalisation API pour obtenir l'emplacement de l'utilisateur.

Compte tenu de cette caractéristique peut violer la vie privée des utilisateurs, sauf si l'utilisateur en décide autrement, les informations de localisation de l'utilisateur ne sont pas disponibles.


support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari et Opera soutien Géolocalisation (situation géographique).

Note: Géolocalisation (géolocalisation) Pour les appareils avec GPS, tels que l' iPhone, géolocalisation plus précis.


HTML5 - Utilisation de ciblage géographique

Utiliser la méthode getCurrentPosition () pour obtenir l'emplacement de l'utilisateur.

L'exemple suivant est une instance de géolocalisation simple, l'utilisateur peut revenir à la latitude de l'emplacement et la longitude:

Exemples

var x = document.getElementById ( "demo");
fonction getLocation ()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (showPosition);
}
autre
{
x.innerHTML = "Ce navigateur ne supporte pas obtenir l'emplacement.";
}
}

fonction showPosition (position)
{
x.innerHTML = "Lat:" + position.coords.latitude +
"<br> Longitude:" + position.coords.longitude;
}

Essayez »

Des exemples d'analyse:

  • Il est testé de géopositionnement
  • Si elle est supportée, exécutez la méthode getCurrentPosition (). Dans le cas contraire, il affiche un message à l'utilisateur.
  • Si getCurrentPosition () réussit, la fonction pour retourner les paramètres spécifiés dans une coordonnées cibles de showPosition
  • showPosition () fonction récupère et affiche la latitude et la longitude

L'exemple ci-dessus est une manipulation sans erreur de script de géolocalisation très basique.


Gestion des erreurs et rejeté

La méthode deuxième paramètre getCurrentPosition () pour les erreurs de manipulation. Il précise lorsque la fonction get à exécuter lorsque l'emplacement de l'utilisateur a échoué:

Exemples

fonction showError (erreur)
{
commutateur (error.code)
{
cas error.PERMISSION_DENIED:
x.innerHTML = "utilisateur a refusé de faire la demande de l'emplacement."
break;
cas error.POSITION_UNAVAILABLE:
x.innerHTML = "informations de localisation ne sont pas disponibles."
break;
cas error.TIMEOUT:
x.innerHTML = "emplacement Demande de l'utilisateur a expiré."
break;
cas error.UNKNOWN_ERROR:
x.innerHTML = "Erreur inconnue."
break;
}
}

Essayez »

Code d'erreur:

  • Autorisation refusée - l'utilisateur n'a pas le droit géopositionnement
  • Position indisponible - Impossible d'obtenir la position actuelle
  • Timeout - L'opération a expiré

Afficher les résultats sur une carte

Pour afficher les résultats dans une carte, vous avez besoin d'accès peut utiliser la latitude et la longitude de services cartographiques, tels que Google Maps ou Baidu carte:

Exemples

fonction 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 & capteur = false";
document.getElementById ( "mapholder") innerHTML = "<img src = '" + img_url + "'>" .;
}

Essayez »

Dans l'exemple ci-dessus, nous utilisons les données de latitude et de longitude retournées par la position d'affichage (en utilisant des images statiques) sur Google Maps.

script de Google Maps
Le lien ci-dessus montre comment utiliser un script pour afficher une carte interactive avec un marqueur, le zoom et les options de glissement.


Pour l'information étant donné l'emplacement

Cette page montre comment afficher l'emplacement de l'utilisateur sur une carte. Toutefois, les informations de géolocalisation pour un endroit donné est également très utile.

exemple:

  • Mettre à jour l'information locale
  • points d'intérêt autour de l'utilisateur d'affichage
  • Système de navigation de véhicule interactif (GPS)

getCurrentPosition () Méthode - Les données de retour

T en cas de succès, la méthode getCurrentPosition () retourne un objet. Retourne toujours la latitude, la longitude et la précision des propriétés. Si elle est disponible, la propriété supplémentaire suivante est renvoyée.

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


objet Géolocalisation - autres méthodes intéressantes

watchPosition () - Retourne l'emplacement actuel de l'utilisateur, et de continuer à retourner la position mise à jour (comme le GPS sur une voiture) lorsque l'utilisateur se déplace.

méthode Stop watchPosition () - clearWatch ()

L'exemple suivant illustre la méthode watchPosition (). Vous avez besoin d'un dispositif GPS précis pour tester les cas (comme l'iPhone):

Exemples

var x = document.getElementById ( "demo");
fonction getLocation ()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition (showPosition);
}
autre
{
x.innerHTML = "Ce navigateur ne supporte pas obtenir l'emplacement.";
}
}
fonction showPosition (position)
{
x.innerHTML = "Lat:" + position.coords.latitude +
"<br> Longitude:" + position.coords.longitude;
}

Essayez »