Heim > Artikel > Web-Frontend > HTML5-Leitfaden-7. Geolokalisierung kombiniert mit Google Maps, um eine kleine Anwendung zu entwickeln_html5-Tutorial-Fähigkeiten

HTML5-Leitfaden-7. Geolokalisierung kombiniert mit Google Maps, um eine kleine Anwendung zu entwickeln_html5-Tutorial-Fähigkeiten

WBOYOriginal: 2016-05-16 15:50:221738Durchsuche

Heute werden wir eine kleine Anwendung entwickeln, indem wir HTML5-Geolokalisierung mit Google Maps kombinieren. Google Maps-API-Adresse: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN.
Um Google Maps aufzurufen, müssen Sie js reference

Die InitMap-Methode ruft die Google Maps-API auf, um die Karte zu initialisieren. Sie muss das Optionsobjekt festlegen und verwenden Sie es beim Aufruf der Karteninitialisierung.

Code kopieren

Der Code lautet wie folgt:

function InitMap() { / * Alle Optionen für die Karte festlegen */ var options = { 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
}
/* Erstellen Sie eine neue Karte für application */
map = new google.maps.Map($('#map')[0], options);
}

Die Methoden getLocation und watchLocation erhalten Positionsinformationen .

Code kopieren

Der Code lautet wie folgt:

Funktion getLocation() { / * Überprüfen Sie, ob der Browser die W3C Geolocation API unterstützt */ if (navigator.geolocation) { browserSupport = true; navigator.geolocation.getCurrentPosition(plotLocation, reportProblem, { timeout: 45000 } );

} else {

reportProblem();

}
}
function watchLocation() {
/* Überprüfen Sie, ob der Browser die W3C Geolocation API unterstützt */
if (navigator .geolocation) {
browserSupport = true;
navigator.geolocation.watchPosition(plotLocation, { timeout: 45000 });
} else {
reportProblem(); }
}

Nachdem Sie die Standortinformationen erfolgreich erhalten haben, rufen Sie die plotLocation-Methode auf, um den Standort auf Google Maps anzuzeigen.

Code kopieren

Der Code lautet wie folgt:

Funktion plotLocation(position) {
Versuche = 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);

Demo-Download-Adresse:

googleMapGeolocation.rar

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie HTML5 CSS3, um einen Slider-Switching-Effekt zu erzielen. Verabschieden Sie sich von den Javascript-CSS_HTML5-Tutorial-FähigkeitenNächster Artikel：Verwenden Sie HTML5 CSS3, um einen Slider-Switching-Effekt zu erzielen. Verabschieden Sie sich von den Javascript-CSS_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen