Kommentar: Heute werden wir die HTML5 -Geolokalisierung kombinieren, um eine kleine Anwendung zu entwickeln. Interessierte Freunde können darüber lernen. Wenn es Mängel gibt, hoffe ich, dass der Held Ihnen Ratschläge gibt.
Heute werden wir die Geolokalisierung von HTML5 mit Google Maps kombinieren, um eine kleine Anwendung zu entwickeln. API-Adresse von Google Maps: https://developers.google.com/maps/documentation/javascript/?hl=zh-cn.Um Google Maps aufzurufen, muss die Implementierung eine JS -Referenz hinzufügen <Skript -Typ = text/javaScript src =? Sensor = false> </script>, wobei die spezifische Bedeutung des Sensorparameters:
Um die Google Maps -API zu verwenden, müssen Sie angeben, ob Ihre Anwendung Sensoren (z. B. GPS -Locators) in einer MAPS -API -Bibliothek oder Serviceanforderungen verwendet, um festzustellen, wo sich der Benutzer befindet. Dies ist besonders wichtig für mobile Geräte. Wenn Ihre Google Maps -API -Anwendung eine beliebige Form des Sensors verwendet, um den Speicherort des Geräts auf Ihre Anwendung zugänglich zu machen, müssen Sie dies deklarieren, indem Sie den Wert des Sensorparameters auf true einstellen.
Der HTML -Teil ist relativ einfach, Sie müssen nur eine DIV erstellen:
<body>
<div>
</div>
</body>
Der Framework des JS -Codes lautet wie folgt:
<script type = "text/javaScript">
var map;
var browsersupport = false;
var Versuche = 0;
$ (Dokument) .Ready (function () {
// Initialisieren Sie die Karte
Initmap ();
//Position
getlocation ();
// Standortverfolgung
Watchlocation ();
});
Funktion initmap () {
/ * Setzen Sie alle Optionen für die Karte */
var options = {
};
/ * Erstellen Sie eine neue Karte für die Anwendung */
map = new Google.maps.map ($ ('#map') [0], Optionen);
}
/*
* Wenn das W3C -Geolokationsobjekt verfügbar ist, erhalten Sie den Strom
* Ort, ansonsten das Problem melden
*/
Funktion getlocation () {
}
Funktion Watchlocation () {
}
/ * Zeichnen Sie den Standort auf der Karte und zoomen Sie darauf */
Funktion plotLocation (Position) {
}
/ * Fehlern mit dieser Funktion melden *//
Funktion reportProblem (e) {
}
</script>
Die InitMap -Methode besteht darin, die Google Maps -API aufzurufen, um die Karte zu initialisieren. Es muss das Optionsobjekt festlegen und beim Aufrufen der MAP -Initialisierung verwenden.
Funktion initmap () {
/ * Setzen Sie alle Optionen für die Karte */
var options = {
Zoom: 4,
Mitte: New Google.Maps.Latlng (38.6201, -90.2003),
MAPTYPEID: google.maps.maptypeid.roadmap,
MAPTYPECONTROL: TRUE,
MAPTYPECONTROLOPTIONIONEN: {
Stil: google.maps.maptypecontrolstyle.horizontal_bar,
Position: google.maps.controlposition.bottom_center
},
Pancontrol: Richtig,
Pancontroloptions: {
Position: google.maps.controlposition.top_right
},
Zoomcontrol: Richtig,
ZoomControloptions: {
Stil: google.maps.zoomcontrolstyle.large,
Position: google.maps.controlposition.left_center
},
scalecontrol: wahr,
Scalecontroloptions: {
Position: google.maps.controlposition.bottom_left
},
StreetViewControl: Richtig,
StreetViewControloptions: {
Position: google.maps.controlposition.left_top
}
};
/ * Erstellen Sie eine neue Karte für die Anwendung */
map = new Google.maps.map ($ ('#map') [0], Optionen);
}
GetLocation- und Watchlocation -Methoden, um Positionierungsinformationen zu erhalten.
Funktion getlocation () {
/ * Überprüfen Sie, ob der Browser die W3C -Geolokalisierungs -API */unterstützt
if (navigator.geolocation) {
browserSupport = true;
navigator.geolocation.getCurrentPosition (PlotLocation, ReportProblem, {Timeout: 45000});
} anders {
ReportProblem ();
}
}
Funktion Watchlocation () {
/ * Überprüfen Sie, ob der Browser die W3C -Geolokalisierungs -API */unterstützt
if (navigator.geolocation) {
browserSupport = true;
navigator.geolocation.watchPosition (PlotLocation, ReportProblem, {Timeout: 45000});
} anders {
ReportProblem ();
}
}
Rufen Sie nach erfolgreichem Erhalt der Standortinformationen die PlotLocations -Methode auf, um den Speicherort auf Google Maps anzuzeigen.
Funktion plotLocation (Position) {
Versuche = 0;
var point = new Google.maps.latlng (Position.coords.Latitude, Position.coords.longitude);
var marker = new Google.maps.marker ({{
Position: Punkt
});
marker.setMap (map);
map.setCenter (Punkt);
map.setZoom (15);
}
Demo -Download -Adresse: googlemapgeolocation.rar