Un type de service plus populaire est appelé service basé sur la localisation (LBS). Ce type de service est les informations selon lesquelles les entreprises utilisent des zones à proximité des coordonnées d'un certain point (comme l'emplacement où se trouve l'utilisateur), tels que les services communs liés à la carte. Dans HTML5, une nouvelle API de géolocalisation a été ajoutée pour déterminer et partager la géolocalisation.
Déclaration de confidentialitéLa confidentialité est une préoccupation lors du partage d'un emplacement physique avec un serveur Web distant. Par conséquent, l'API Geolocation oblige l'utilisateur à fournir des autorisations avant que l'application Web puisse accéder aux informations de localisation. Lorsque vous accédez à une page Web pour la première fois qui demande des données de géolocalisation, le navigateur affichera une barre de notification vous incitant à donner accès à l'emplacement de l'utilisateur. Suivez les invites du navigateur et sélectionnez l'autorisation pertinente.
Si l'utilisateur n'accorde pas d'autorisations, les informations de localisation ne sont pas fournies à l'application Web. L'appel de l'API pertinente ne déclenchera pas un rappel réussi.
Vérifier la prise en charge du navigateurL'API Geolocation est prise en charge dans la dernière version des navigateurs grand public, mais pour être compatible avec les anciens navigateurs, vous devez toujours le vérifier. Si l'API Geolocation n'est pas disponible, Window.Navigator.Geolocation sera nul comme suit:
function show_islocationeNabled ()
{
var str = "Non, la géolocalisation n'est pas prise en charge.";
if (window.navigator.geolocation) {
str = "Oui, la géolocalisation est prise en charge.";
}
alerte (str);
}
L'API Geolocation est basée sur une nouvelle propriété de l'objet global de navigation: Navigator.Geolocation, qui fournit des informations utiles sur le navigateur et le système du visiteur. Les informations de géolocalisation peuvent être obtenues par de nombreux moyens: tels que les stations de base, les bases de données Web ou les GP. La précision des informations de géolocalisation obtenues à l'aide de différentes méthodes est également différente. De manière générale, la plus précise est obtenue via GPS (le plus grand public est utilisé sur les plates-formes mobiles, et la plate-forme PC s'appuie essentiellement sur les données réseau). Par hasard, à certains endroits, vous ne pourrez peut-être pas obtenir des lectures de localisation géographique claires ou ne recevoir aucune donnée.
Positionner l'emplacement actuelUtilisez la méthode GetCurrentPosition () de navigation.Geolocation pour obtenir l'emplacement actuel de l'utilisateur. Cette méthode n'obtient les informations de localisation qu'une seule fois. Lorsque la méthode est appelée par le script, la méthode tente d'obtenir l'emplacement actuel du périphérique hôte de manière asynchrone.
Signature de la méthode: getCurrentPosition (GeolocationsCcessCallback, [GeolocationErrorCallback, GeolocationOptions]);
1. GeolocationsCessCallback: Obtenez le rappel après le succès de l'emplacement actuel (requis)
2. GeolocationErrorCallback. Rappel utilisé lorsqu'une erreur se produit (facultatif)
3. GeolocationOptions. Options de géolocalisation (facultative)
Traiter les informations de localisation
Une fois que la méthode getCurrentpositon () obtient avec succès la position actuelle, elle enregistrera les informations de position dans un objet de position, puis utilisera cet objet comme paramètre pour exécuter le rappel de GeolocationsCessCallback. Dans cette fonction de rappel, vous pouvez gérer arbitrairement les informations contenues dans cet objet.
L'objet de position a deux propriétés: horodatage et coords. L'attribut horodat représente le temps de création des données de géolocalisation, et l'attribut coords représente les informations de géolocalisation et contient sept attributs:
.coords.Latitude: estimer la latitude
. coords.longitude: estimation de la longitude
.coords.altitude: hauteur estimée
. Coords.
.Coords.altituduacuracy: La précision des estimations de hauteur fournies en mètres
. coordonnées.
.Coords.Speed: la vitesse actuelle du sol de l'appareil en mètres par seconde
Généralement, trois de ces propriétés sont garanties: coordonnées.latitude, coordonnées.longitude et coordonnées, et le reste revient nul; Cela dépend des capacités de l'appareil et du serveur de positionnement backend qu'il utilise. De plus, les propriétés de cap et de vitesse peuvent être calculées en fonction de la position précédente de l'utilisateur.
Gestion des erreursSi une erreur se produit lors de l'exécution de la méthode GetCurrentPositon (), la méthode transmet un objet PositionError au rappel GeolocationErrorCallback.
Définir les options de géolocalisationVous pouvez définir trois propriétés de GeolocationOptions:
Activer Highgacuratie: si le périphérique prend en charge une haute précision, cette option indique si une haute précision est activée.
Timeout: délai de requête
Maximum: le nombre maximum de fois où se trouve le cache, pendant lequel le cache peut être utilisé.
Voir l'exemple complet ci-dessous:
<! Doctype html>
<html>
<body>
<p id = "Demo"> Cliquez sur le bouton pour obtenir votre position: </p>
<bouton onclick = "getLocation ()"> Essayez-le </button>
<div id = "maholder"> </div>
<cript>
var x = document.getElementById ("Demo");
fonction getLocation () {
if (navigator.geolocation) {
Navigator.Geolocation.getCurrentPosition (showPosition, Showerror);
}
autre{
x.innerhtml = "La géolocalisation n'est pas prise en charge par ce navigateur.";
}
}
Fonction ShowPosition (position) {
var latlon = position.coords.Latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "& zoom = 9 & size = 400x300 & capteur = false";
document.getElementById ("MALOLDER"). innerHTML = "<img src = '" + img_url + "' />";
}
fonction showerror (erreur) {
commutateur (error.code) {
caser error.permission_denided:
x.innerhtml = "L'utilisateur a refusé la demande de géolocalisation."
casser;
caser error.position_unavailable:
x.innerhtml = "Les informations de localisation sont indisponibles."
casser;
Erreur de cas.Timeout:
x.innerhtml = "La demande d'emplacement de l'utilisateur a chronométré."
casser;
Case Error.unknown_error:
x.innerhtml = "Une erreur inconnue s'est produite."
casser;
}
}
</cript>
</docy>
</html>
Cet exemple prend l'emplacement géographique de l'appareil actuel et l'affiche dans Google Maps. Bien sûr, vous pouvez utiliser la version graphique statique dans l'API Baidu Maps pour transformer cet exemple. Pour l'API Baidu Map, veuillez vous référer au lien dans la référence pratique plus tard.
Allumer / annuler le positionnement continuUtilisez la méthode WatchPosition () de navigation.Geolocation pour interroger régulièrement l'emplacement de l'utilisateur pour voir si l'emplacement de l'utilisateur a changé. Cette méthode a trois paramètres: ces trois paramètres sont les mêmes que la méthode GetCurrentPosition (), un rappel réussi, un rappel raté et une option pour obtenir des informations de position; Cette méthode a une valeur de retour WatchID, qui est utilisée pour annuler le positionnement continu.
Utilisez la méthode de ClearWatch () de Navigation.Geolocation pour mettre fin à la WatchPosition en cours (), qui ne prend qu'un seul paramètre WatchID.
Voir l'exemple suivant:
<! Doctype html>
<html>
<adal>
<Title> Exemple de l'API Geolocation: Écoute pour les mises à jour de l'emplacement </TITME>
<meta http-equiv = "x-ua compatible" content = "ie = 9" />
<script type = "text / javascript">
fonction setText (val, e) {
document.getElementById (e) .Value = Val;
}
var nav = null;
var watsidId;
fonction écouteforPositionUpdates () {
if (nav == null) {
nav = window.navigator;
}
if (nav! = null) {
var geoloc = nav.Geolocation;
if (geoLoc! = null) {
watsidId = geoLoc.WatchPosition (SuccessCallback);
}
autre {
alert ("Géolocation non soutenue");
}
}
autre {
alerte ("navigateur introuvable");
}
}
fonction clearwatch (watsidId) {
window.navigator.geolocation.clearwatch (watchID);
}
Fonction SuccessCallback (position)
{
setText (position.coords.Latitude, "latitude");
setText (position.coords.longitude, "longitude");
}
</cript>
</ head>
<body>
<étiquette pour = "latitude"> latitude: </ label> <id id = "latitude" />
<étiquette pour = "longitude"> longitude: </ label> <input id = "longitude" />
<input type = "Button" value = "watch latitude et longitude" onclick = "écouterForPositionUpdates ()" />
<input type = "Button" value = "Clear watch" onclick = "clearwatch ()" />
</docy>
</html>
Référence pratique:Document officiel: http://www.w3schools.com/html5/html5_geolocation.asp
Modèle soucis: http://www.cuoxin.com/w3school/html5/
Aide Microsoft: http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
API Baidu Map: http://dev.baidu.com/wiki/static/index.htm