Raid sur l'extension 2 de l'API Javascript HTML5 – Services d'informations géographiques et API de géolocalisation Learning_html5 Compétences du didacticiel

L'un des types de services les plus populaires est désormais appelé service basé sur la localisation (LBS). Ce type de service correspond aux informations que les entreprises utilisent pour fournir des services dans la zone proche des coordonnées d'un certain point (comme l'emplacement de l'utilisateur). tels que les cartes communes. En HTML5, une nouvelle API de géolocalisation est ajoutée pour déterminer et partager la géolocalisation.
Déclaration de confidentialité
La confidentialité est une préoccupation lors du partage de votre emplacement physique avec un serveur Web distant. Par conséquent, l'API de géolocalisation exige que les utilisateurs fournissent une autorisation avant qu'une application Web puisse accéder aux informations de localisation. La première fois que vous visitez une page Web demandant des données de géolocalisation, votre navigateur affichera une barre de notification offrant un accès à la localisation de l'utilisateur. Suivez les invites du navigateur et sélectionnez l'autorisation appropriée.
Les informations de localisation ne seront pas fournies à l'application Web si l'utilisateur n'accorde pas l'autorisation. L’appel de l’API appropriée ne déclenchera pas de rappel réussi.
Vérifiez la prise en charge du navigateur
L'API de géolocalisation est prise en charge dans les dernières versions des navigateurs grand public, mais pour la compatibilité avec les navigateurs plus anciens, vous devez toujours vérifier. Si l'API de géolocalisation n'est pas disponible, window.navigator.geolocation sera nul, comme indiqué ci-dessous :

Copier le code

Le code est le suivant :

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.";
}
alert( str );
}

L'API de géolocalisation est basée sur un nouvel attribut de l'objet global navigateur : navigator.geolocation, cet objet 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 le GPS. La précision des informations de géolocalisation obtenues à l'aide de différentes méthodes est également différente. Habituellement, la précision obtenue via le GPS est la plus précise (le GPS est le plus utilisé sur les plates-formes mobiles et les données réseau sont essentiellement utilisées sur les plates-formes PC). Parfois, à certains endroits, il se peut que vous n'obteniez pas de lecture de géolocalisation claire ou que vous ne receviez aucune donnée.
Localisez la position actuelle
Utilisez la méthode getCurrentPosition() de navigator.geolocation pour obtenir la position actuelle de l'utilisateur. Cette méthode n'obtient les informations de localisation qu'une seule fois. Lorsque cette méthode est appelée par un script, elle tente de manière asynchrone d'obtenir l'emplacement actuel du périphérique hôte.

Copier le code

Le code est le suivant :

Signature de la méthode : getCurrentPosition(geolocationSuccessCallback ,[geolocationErrorCallback ,geolocationOptions]);
　1. geolocationSuccessCallback : Le rappel après avoir obtenu avec succès l'emplacement actuel (obligatoire)
　2. geolocationErrorCallback Le rappel utilisé lorsqu'une erreur se produit (facultatif)
　3. geolocationOptions. Option Position géographique (facultatif)

Traitement des informations de position
La méthode getCurrentPositon() enregistrera les informations de position dans un objet Position après avoir obtenu avec succès la position actuelle, puis exécutera cet objet en tant que paramètre geolocationSuccessCallback ce rappel. Dans cette fonction de rappel, vous pouvez faire ce que vous voulez avec les informations contenues dans cet objet.
L'objet Position a deux attributs : l'horodatage et les coordonnées. L'attribut timestamp représente l'heure de création des données de localisation géographique, et l'attribut coords représente les informations de localisation géographique, qui contiennent sept attributs :

Copier le code

Le code est le suivant :

coords.latitude : latitude estimée
: longitude estimée
. 🎜>. coords.accuracy : all La précision des estimations de longitude et de latitude fournies en mètres
coords.altitudeAccuracy : La précision des estimations d'altitude fournies en mètres
: La direction angulaire dans laquelle le. l'appareil hôte se déplace actuellement, calculé dans le sens des aiguilles d'une montre par rapport au nord géographique
coords.speed : la vitesse au sol actuelle de l'appareil en mètres par seconde

.
Généralement, trois de ces propriétés sont garanties : coords.latitude, coords.longitude et coords.accuracy, et le reste renvoie null, cela dépend des capacités de l'appareil et du serveur de positionnement backend qu'il utilise. De plus, les attributs de cap et de vitesse peuvent être calculés en fonction de la position précédente de l'utilisateur.
Gestion des erreurs
Si une erreur se produit lors de l'exécution de la méthode getCurrentPositon(), la méthode passe un objet PositionError au rappel geolocationErrorCallback.
Définir les options de géolocalisation
Vous pouvez définir trois propriétés de géolocalisationOptions :

Copier le code

Le code est le suivant :

enableHighAccuracy : Si l'appareil prend en charge la haute précision, cette option indique s'il faut activer la haute précision.
timeout : Délai d'expiration de la requête
maximumAge : La durée maximale de l'emplacement mis en cache, pendant laquelle le cache peut être utilisé.

Regardez l'exemple complet ci-dessous :

Copiez le code

Le code est tel suit :

position :
Essayez-le

;script>
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
x.innerHTML="La géolocalisation n'est pas prise en charge par ce navigateur.";
}
}
function 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&sensor =false";
document.getElementById("mapholder").innerHTML="";
}
function showError(erreur) {
switch(error.code ) {
case error.PERMISSION_DENIED:
x.innerHTML="L'utilisateur a refusé la demande de géolocalisation."
case error.POSITION_UNAVAILABLE:
x.innerHTML ="Les informations de localisation ne sont pas disponibles."
break;
case error.TIMEOUT:
x.innerHTML="La demande d'obtention de la localisation de l'utilisateur a expiré
break; UNKNOWN_ERROR :
x.innerHTML="Une erreur inconnue s'est produite."
break;
}
/html>


Cet exemple obtient l'emplacement géographique de l'appareil actuel et l'affiche dans Google Maps. Bien entendu, vous pouvez utiliser la plaque statique de l'API Baidu Map pour transformer cet exemple. Pour l'API Baidu Map, veuillez vous référer au lien dans la référence pratique ultérieurement.

Activer/annuler le positionnement continu

Utilisez la méthode watchPosition() de navigator.geolocation pour interroger périodiquement 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 après succès, un rappel après échec et une option pour obtenir des informations de position, cette méthode a une valeur de retour watchID, qui est utilisée pour annuler ; positionnement continu.

Utilisez la méthode clearWatch() de navigator.geolocation pour mettre fin à watchPosition() en cours. Cette méthode ne prend qu'un seul paramètre watchID.
Regardez l'exemple ci-dessous :



Copiez le code

Le code est le suivant :

Latitude :

Longitude :

实用参考：
官方文档：http://www.w3schools.com/html5/html5_geolocation.asp
脚本之家：http://www.jb51.net/w3school/html5/
微软帮助：http://msdn.microsoft.com/zh-cn/library/gg589502(v =vs.85)
百度地图API：http://dev.baidu.com/wiki/static/index.htm