Utiliser la géolocalisation en HTML5 pour obtenir la localisation géographique et appeler l'API Google Map pour localiser sur Google Map_html5 compétences du didacticiel

Ce plat d'accompagnement vient de commencer à apprendre le HTML5, et maintenant je suis très intéressé par la géolocalisation, je l'ai combiné avec l'API de Google Map pour réaliser la fonction de positionnement de base de la carte.
1. Obtenez la situation géographique actuelle
Appelez la méthode void getCurrentPosition(onSuccess, onError, options);.
Parmi eux, onSuccess est la fonction de rappel exécutée lorsque les informations de localisation actuelle sont obtenues avec succès, onError est la fonction de rappel exécutée lorsque les informations de localisation actuelle ne peuvent pas être obtenues et options sont des listes familières facultatives. Les deuxième et troisième paramètres sont des attributs facultatifs.
Dans la fonction de rappel onSuccess, le paramètre position est utilisé, qui représente un objet de position spécifique et représente la position actuelle. Il possède les attributs suivants :
•latitude : la latitude de la situation géographique actuelle.
•longitude : La longitude de l'emplacement géographique actuel.
•altitude : l'altitude de la position actuelle (nulle si elle ne peut être obtenue).
•précision : la précision de la latitude et de la longitude obtenues (en mètres).
•altitudePrecision : La longitude de l'altitude obtenue (en mètres).
•titre : la direction vers l'avant de l'appareil. Représenté par l'angle de rotation dans le sens horaire face à la direction de l'objet (nul s'il ne peut être obtenu).
•vitesse : La vitesse d'avancement de l'appareil (en mètres/seconde, nulle si elle ne peut être obtenue).
•horodatage : l'heure à laquelle les informations de localisation géographique ont été obtenues.

Dans la fonction de rappel onError, le paramètre error est utilisé. Il possède les attributs suivants :
•code : code d'erreur, avec les valeurs suivantes.
1. L'utilisateur a rejeté le service de localisation (la valeur de l'attribut est 1
2. Impossible d'obtenir les informations de localisation (la valeur de l'attribut est 2
3). ).
•message : chaîne contenant des informations d'erreur spécifiques.

Dans le paramètre options, les attributs facultatifs sont les suivants :
•enableHighAccuracy : s'il faut exiger des informations de localisation géographique de haute précision.
•timeout : Définissez le délai d'expiration (unité : millisecondes).
•maximumAge : durée de validité pour la mise en cache des informations de localisation géographique (unité : millisecondes).
Assurez-vous d'écrire le code suivant pour déterminer si le navigateur prend en charge HTML5 pour obtenir des informations de localisation géographique, afin d'être compatible avec les navigateurs antérieurs qui ne le prennent pas en charge.

Copier le code

Le code est le suivant :

if (navigator.geolocation) {
//Obtenir les informations de localisation géographique actuelle
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
alert("Votre navigateur ne prend pas en charge HTML5 pour obtenir la localisation géographique informations." ; Comme indiqué ci-dessous.

Copier le code


Le code est le suivant :

Deuxièmement, définissez les paramètres de la carte et méthode de réglage Comme indiqué ci-dessous.

Copier le code


Le code est le suivant :

//Spécifiez une coordonnée sur Point Google Maps, précisez l'abscisse et l'ordonnée du point de coordonnées en même temps var latlng = new google.maps.LatLng(coords.latitude, coords.longitude var myOptions = { zoom); : 14, / /Définir le facteur de grossissement

center: latlng, //Définir le point central de la carte sur le point de coordonnées spécifié

mapTypeId: google.maps.MapTypeId.ROADMAP //Spécifiez le type de carte

} ;


Enfin, créez la carte et affichez-la sur la page

Copier le code


Le code est le suivant :

//Créer une carte et l'afficher dans la page mapvar map = new google.maps.Map(document.getElementById ("map"), myOptions);

Enfin, je présente tous les codes pour cet exemple. Le code est affiché ci-dessous.

Copier le code


Le code est le suivant :

http-equiv="Content-Type" content="text/html; charset=utf-8" />
;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
body onload ="init()">