Commentaire: Aujourd'hui, nous combinerons la géolocalisation HTML5 pour développer une petite application. Les amis intéressés peuvent en savoir plus. S'il y a des lacunes, j'espère que le héros vous donnera des conseils.
Aujourd'hui, nous combinerons la géolocalisation de HTML5 avec Google Maps pour développer une petite application. Adresse de l'API de Google Maps: https://developers.google.com/maps/documentation/javascript/?hl=zh-cn.Pour appeler Google Maps, l'implémentation doit ajouter une référence JS <Script type = text / javascript src =? Capteur = false> </cript>, où la signification spécifique du paramètre du capteur:
Pour utiliser l'API Google Maps, vous devez indiquer si votre application utilise des capteurs (tels que les localisateurs GPS) dans n'importe quelle bibliothèque API ou demandes de service MAPS pour déterminer où l'utilisateur est. Ceci est particulièrement important pour les appareils mobiles. Si votre application API Google Maps utilise n'importe quelle forme de capteur pour déterminer l'emplacement de l'appareil accédant à votre application, vous devez le déclarer en définissant la valeur du paramètre du capteur sur true.
La partie HTML est relativement simple, il vous suffit de préparer une div:
<body>
<div>
</div>
</docy>
Le cadre du code JS est le suivant:
<script type = "text / javascript">
var map;
var Browsersupport = false;
var tentatives = 0;
$ (document) .ready (function () {
// initialise la carte
Initmap ();
//position
getLocation ();
// Suivi de l'emplacement
watchLocation ();
});
fonction initmap () {
/ * Définissez toutes les options pour la carte * /
Var Options = {
};
/ * Créez une nouvelle carte pour l'application * /
map = new Google.maps.map ($ ('# map') [0], options);
}
/ *
* Si l'objet de géolocalisation W3C est disponible, obtenez le courant
* Emplacement, sinon signaler le problème
* /
fonction getLocation () {
}
fonction watchLocation () {
}
/ * Tracez l'emplacement sur la carte et zoomez-le * /
fonction PlotLocation (position) {
}
/ * Signaler toutes les erreurs en utilisant cette fonction * /
Fonction ReportProblem (e) {
}
</cript>
La méthode initmap consiste à appeler l'API Google Maps pour initialiser la carte. Il doit définir l'objet Options et l'utiliser lors de l'appel de l'initialisation de la carte.
fonction initmap () {
/ * Définissez toutes les options pour la carte * /
Var Options = {
Zoom: 4,
Centre: nouveau google.maps.latlng (38.6201, -90.2003),
MapTypeid: google.maps.maptypeid.roadmap,
mapTypeControl: true,
MapTypeControlOptions: {
style: google.maps.maptypecontrolstyle.horizontal_bar,
Position: google.maps.controlposition.bottom_center
},
Pancontrol: vrai,
Pancontroloptions: {
Position: google.maps.controlposition.top_right
},
ZoomControl: true,
ZoomControlOptions: {
style: google.maps.zoomontrolstyle.large,
Position: google.maps.controlposition.left_center
},
ScaleControl: vrai,
ScaleControloptions: {
Position: google.maps.controlposition.bottom_left
},
StreetViewControl: true,
StreetViewControloptions: {
Position: google.maps.controlposition.left_top
}
};
/ * Créez une nouvelle carte pour l'application * /
map = new Google.maps.map ($ ('# map') [0], options);
}
Méthodes GetLocation et Watchlocation pour obtenir des informations de positionnement.
fonction getLocation () {
/ * Vérifiez si le navigateur prend en charge l'API de géolocalisation W3C * /
if (navigator.geolocation) {
Browsersupport = true;
Navigator.Geolocation.getCurrentPosition (PlotLocation, reportProblem, {timeout: 45000});
} autre {
reportProblem ();
}
}
fonction watchLocation () {
/ * Vérifiez si le navigateur prend en charge l'API de géolocalisation W3C * /
if (navigator.geolocation) {
Browsersupport = true;
Navigator.Geolocation.WatchPosition (intrigue, reportProblem, {timeout: 45000});
} autre {
reportProblem ();
}
}
Après avoir réussi les informations de localisation, appelez la méthode de la parcelle pour afficher l'emplacement sur Google Maps.
fonction PlotLocation (position) {
tentatives = 0;
var point = new Google.maps.latlng (position.coords.Latitude, position.coords.longitude);
var marker = new Google.maps.marker ({{{{
Position: point
});
marker.setmap (map);
map.setCenter (point);
map.setzoom (15);
}
Adresse de téléchargement de démo: googlemapgeolocation.rar