Commentaire: Ce plat d'accompagnement vient de commencer à apprendre HTML5, et est maintenant très intéressé par la géolocalisation. La fonction de positionnement de la carte de base est implémentée en combinaison avec Google Map API. Les étapes suivantes sont principalement utilisées: obtenir l'emplacement géographique actuel et appeler l'API Google Map pour obtenir les informations de localisation actuelles.
Ce plat d'accompagnement vient de commencer à apprendre HTML5, et s'intéresse désormais à la géolocalisation, et combine l'API de Google Map pour implémenter les fonctions de positionnement de la carte de base.1. Obtenez l'emplacement géographique actuel
Appelez la méthode void getCurrentPosition (onSuccess, onError, options);
Lorsque ONSUCCESS est une fonction de rappel exécutée lorsque les informations de localisation actuelles sont réussies, ONERROR est une fonction de rappel exécutée lorsque les informations de localisation actuelles sont échouées, les 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, la position du paramètre est utilisée pour représenter un objet de position spécifique et représenter la position actuelle. Il a les propriétés suivantes:
• Latitude: la latitude de l'emplacement géographique actuel.
• Longitude: la longitude de l'emplacement géographique actuel.
• Altitude: l'altitude de l'emplacement actuel (null s'il ne peut pas être récupéré).
• Précision: précision (en mètres) de la latitude et de la longitude obtenues.
• AltutudeAcurancy: la longitude (en mètres) de l'altitude obtenue.
• En-tête: la direction de l'appareil. Il est représenté par un angle de rotation dans le sens horaire face à la direction avant (null s'il ne peut pas être récupéré).
• Vitesse: la vitesse avant de l'appareil (en mètres / seconde, null s'il ne peut pas être récupéré).
• Timestamp: l'heure à laquelle vous obtenez des informations de géolocalisation.
Dans la fonction de rappel ONERROR, le paramètre d'erreur est utilisé. Il a les propriétés suivantes:
• Code: code d'erreur, avec la valeur suivante.
1. L'utilisateur a rejeté le service de localisation (la valeur d'attribut est 1);
2. Les informations de localisation ne peuvent pas être obtenues (la valeur d'attribut est 2);
3. Obtenez l'erreur de délai d'expiration des informations (la valeur de la propriété est 3).
• Message: chaîne, contenant des informations d'erreur spécifiques.
Dans le paramètre Options, les propriétés facultatives sont les suivantes:
• Activer la hausse de la hauteur: si des informations de géolocalisation à haute précision sont nécessaires.
• Délai d'expiration: définissez l'heure du délai d'attente (en millisecondes).
• Maximum: le temps valide (en millisecondes) pour les informations sur la géolocalisation du cache.
Notez que vous devez rédiger le code suivant pour déterminer si le navigateur prend en charge HTML5 pour obtenir des informations de localisation géographique, afin d'être compatibles avec les navigateurs qui n'étaient pas pris en charge plus tôt.
if (navigator.geolocation) {
// Obtenez les informations de localisation géographique actuelles
Navigator.Geolocation.getCurrentPosition (Onsuccess, ONERROR, Options);
} autre {
alert ("Votre navigateur ne prend pas en charge HTML5 pour obtenir des informations de géolocalisation.");
}
2. Appelez l'API Google Map pour obtenir les informations de localisation actuelles
Tout d'abord, vous devez référencer le fichier de script de l'API Google Map dans la page. La méthode d'importation est la suivante.
<script type = "text / javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </ script>
Deuxièmement, définissez les paramètres de carte et la méthode de paramètre est la suivante.
// Spécifiez un point de coordonnée sur Google Map, et spécifiez également les coordonnées horizontales et verticales du point de coordonnées.
var latlng = new Google.maps.latlng (coords.Latitude, coords.longitude);
var myoptions = {
Zoom: 14, // Réglez le grossissement
Centre: latlng, // Définissez le point central de la carte sur le point de coordonnée spécifié
MapTypeid: google.maps.maptypeid.roadmap // spécifiez le type de carte
};
Enfin, créez une carte et affichez-la dans la page, la méthode de création est la suivante
// Créez une carte et affichez-la dans la carte de la page
var map = new Google.maps.map (document.getElementById ("map"), myoptions);
À la fin, tous les codes de cet exemple sont présentés. Le code est illustré ci-dessous.
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Obtenez l'emplacement actuel et affichez-le sur Google Maps </Title>
<script type = "text / javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </ script>
<script type = "text / javascript">
fonction init () {
if (navigator.geolocation) {
// Obtenez l'emplacement géographique actuel
navigator.geolocation.getCurrentPosition (fonction (position) {
var coords = position.coords;
//console.log( position);
// Spécifiez un point de coordonnée sur Google Map, et spécifiez également les coordonnées horizontales et verticales du point de coordonnées.
var latlng = new Google.maps.latlng (coords.Latitude, coords.longitude);
var myoptions = {
Zoom: 14, // Réglez le grossissement
Centre: latlng, // Définissez le point central de la carte sur le point de coordonnée spécifié
MapTypeid: google.maps.maptypeid.roadmap // spécifiez le type de carte
};
// Créez une carte et affichez-la dans la carte de la page
var map = new Google.maps.map (document.getElementById ("map"), myoptions);
// Créer des marques sur la carte
var marker = new Google.maps.marker ({{{{
Position: latlng, // cliquez sur les coordonnées définies ci-dessus
Carte: Carte // Définissez cette annotation dans la carte que vous venez de créer
});
// Fenêtre d'invite de balise
var infowindow = new Google.maps.infowindow ({
Contenu: "Emplacement actuel: <br/> Long:" + latlng.lat () + "<br/> Dimension:" + latlng.lng () // Message de l'invite dans le formulaire d'invite
});
// Ouvrez la fenêtre d'invite
infowindow.open (carte, marqueur);
},
fonction (erreur) {
// Erreur de traitement
commutateur (error.code) {
Cas 1:
alerte ("Service de localisation refusé.");
casser;
Cas 2:
alerte ("Les informations de localisation ne peuvent pas être obtenues pour le moment.");
casser;
Cas 3:
alert ("Get Information Timeout.");
casser;
défaut:
alert ("Erreur inconnue.");
casser;
}
});
} autre {
alert ("Votre navigateur ne prend pas en charge HTML5 pour obtenir des informations de géolocalisation.");
}
}
</cript>
</ head>
<body>
<div> </div>
</docy>
</html>