Maison > Article > interface Web > Guide HTML5-7 Géolocalisation combinée avec Google Maps pour développer un petit tutoriel application_html5.
Guide HTML5-7 Géolocalisation combinée avec Google Maps pour développer un petit tutoriel application_html5.
- WBOYoriginal
- 2016-05-16 15:50:221739parcourir
Aujourd'hui nous allons développer une petite application en combinant la géolocalisation HTML5 avec Google Maps. Adresse de l'API Google Maps : https://developers.google.com/maps/documentation/javascript/?hl=zh-CN.
Pour appeler Google Maps, vous devez ajouter la référence js
La méthode InitMap consiste à appeler l'API de Google Maps pour initialiser la carte. Elle doit définir l'objet d'options. et utilisez-le lors de l'appel de l'initialisation de la carte.
Copier le code
Le code est le suivant : function InitMap() {
/ * Définir toutes les options de la carte */ zoom : 4,
center : new 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 : true,
panControlOptions : {
position : google.maps.ControlPosition.TOP_RIGHT
},
zoomControl : true,
zoomControlOptions : {
style : google.maps .ZoomControlStyle.LARGE,
position : google.maps.ControlPosition.LEFT_CENTER
},
scaleControl : true,
scaleControlOptions : {
position : google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl : true,
streetViewControlOptions : {
position : google.maps.ControlPosition.LEFT_TOP
}
}
/* Créer une nouvelle carte pour le application */
map = new google.maps.Map($('#map')[0], options);
}
Les méthodes getLocation et watchLocation obtiennent des informations de positionnement .
center : new 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 : true,
panControlOptions : {
position : google.maps.ControlPosition.TOP_RIGHT
},
zoomControl : true,
zoomControlOptions : {
style : google.maps .ZoomControlStyle.LARGE,
position : google.maps.ControlPosition.LEFT_CENTER
},
scaleControl : true,
scaleControlOptions : {
position : google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl : true,
streetViewControlOptions : {
position : google.maps.ControlPosition.LEFT_TOP
}
}
/* Créer une nouvelle carte pour le application */
map = new google.maps.Map($('#map')[0], options);
}
Les méthodes getLocation et watchLocation obtiennent des informations de positionnement .
Copier le code
Le code est le suivant : function getLocation() {
/ * Vérifiez si le navigateur prend en charge l'API de géolocalisation du W3C */ browserSupport = true;
navigator.geolocation.getCurrentPosition(plotLocation, reportProblem, { timeout: 45000 } );
} else {
reportProblem();
}
}
function watchLocation() {
/* Vérifiez si le navigateur prend en charge l'API de géolocalisation du W3C */
if (navigator .geolocation) {
browserSupport = true;
navigator.geolocation.watchPosition(plotLocation, reportProblem, { timeout : 45000 });
} else {
reportProblem(); }
}
Après avoir obtenu avec succès les informations de localisation, appelez la méthode plotLocation 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 la démo :
googleMapGeolocation.rar
navigator.geolocation.getCurrentPosition(plotLocation, reportProblem, { timeout: 45000 } );
} else {
reportProblem();
}
}
function watchLocation() {
/* Vérifiez si le navigateur prend en charge l'API de géolocalisation du W3C */
if (navigator .geolocation) {
browserSupport = true;
navigator.geolocation.watchPosition(plotLocation, reportProblem, { timeout : 45000 });
} else {
reportProblem(); }
}
Après avoir obtenu avec succès les informations de localisation, appelez la méthode plotLocation pour afficher l'emplacement sur Google Maps.
Copier le code
Le code est le suivant :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 la démo :
googleMapGeolocation.rar
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn