Kommentar: Diese Beilage lernte gerade HTML5 und ist jetzt sehr an Geolokalisierung interessiert. Die grundlegende Kartenpositionierungsfunktion wird in Kombination mit der Google Map -API implementiert. Die folgenden Schritte werden hauptsächlich verwendet: Erhalten Sie den aktuellen geografischen Standort und rufen Sie die Google Map -API an, um die aktuellen Standortinformationen zu erhalten.
Diese Beilage lernte gerade HTML5 und ist jetzt sehr an Geolokalisierung interessiert und kombiniert die API von Google Map, um grundlegende Kartenpositionierungsfunktionen zu implementieren.1. Erhalten Sie den aktuellen geografischen Ort
Nennen Sie die Methode void GetCurrentPosition (OnSuccess, OnError, Optionen);
Wenn Onsuccess eine Rückruffunktion ist, die ausgeführt wird, die bei erfolgreicher Standortinformationen erfolgreich ist, ist OnError eine Rückruffunktion, die ausgeführt wird, wenn die aktuellen Standortinformationen fehlgeschlagen sind. Optionen sind einige optionale bekannte Listen. Die zweite und dritte Parameter sind optionale Attribute.
In der Onsuccess -Rückruffunktion wird die Parameterposition verwendet, um ein bestimmtes Positionsobjekt darzustellen und die aktuelle Position darzustellen. Es hat die folgenden Eigenschaften:
• Breitengrad: Der Breitengrad des aktuellen geografischen Ortes.
• Länge: Die Länge des aktuellen geografischen Ortes.
• Höhe: Die Höhe des aktuellen Standorts (null, wenn es nicht abgerufen werden kann).
• Genauigkeit: Genauigkeit (in Metern) des erhaltenen Breitengrads und Längengrads.
• AltitudeAccurancy: Die Länge (in Metern) der erhaltenen Höhe.
• Überschrift: Die Richtung des Geräts. Es wird durch einen Drehwinkel im Uhrzeigersinn der vorwärts gerichteten Richtung dargestellt (null, wenn es nicht abgerufen werden kann).
• Geschwindigkeit: Die Vorwärtsgeschwindigkeit des Geräts (in Metern/Sekunde null, wenn es nicht abgerufen werden kann).
• Zeitstempel: Die Zeit, in der Sie Geolokalisierungsinformationen erhalten.
In der OnError -Rückruffunktion wird der Fehlerparameter verwendet. Es hat die folgenden Eigenschaften:
• Code: Fehlercode mit dem folgenden Wert.
1. Der Benutzer lehnte den Standortdienst ab (der Attributwert ist 1);
2. Die Standortinformationen können nicht erhalten werden (der Attributwert ist 2);
3. Erreichen Sie den Zeitlimit -Fehler in Informationen (Eigenschaftswert ist 3).
• Nachricht: Zeichenfolge, mit spezifischen Fehlerinformationen.
Im Parameter Optionen sind die optionalen Eigenschaften wie folgt:
• EnableHighaccuracy: Ob hochpräzisen Geolokalisierungsinformationen erforderlich sind.
• Zeitüberschreitung: Stellen Sie die Zeitüberschreitungszeit (in Millisekunden) fest.
• Maximum: Die gültige Zeit (in Millisekunden) für Cache -Geolokalisierungsinformationen.
Beachten Sie, dass Sie den folgenden Code schreiben müssen, um festzustellen, ob der Browser HTML5 unterstützt, um geografische Standortinformationen zu erhalten, um mit Browsern kompatibel zu sein, die nicht früher unterstützt wurden.
if (navigator.geolocation) {
// Erhalten Sie die aktuellen geografischen Standortinformationen
navigator.geolocation.getCurrentPosition (Onsuccess, OnError, Optionen);
} anders {
ALERT ("Ihr Browser unterstützt HTML5 nicht, um Geolokalisierungsinformationen zu erhalten.");
}
2. Rufen Sie die Google Map -API an, um aktuelle Standortinformationen zu erhalten
Zunächst müssen Sie die Skriptdatei der Google Map -API in der Seite verweisen. Die Importmethode lautet wie folgt.
<script type = "text/javaScript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
Zweitens setzen Sie die MAP -Parameter und die Einstellungsmethode lautet wie folgt.
// Geben Sie einen Koordinatenpunkt auf Google Map an und geben Sie auch die horizontalen und vertikalen Koordinaten des Koordinatenpunkts an.
var latlng = new Google.maps.latlng (Coords.Latitude, Coords.longitude);
var myoptions = {
Zoom: 14, // Setzen Sie die Vergrößerung
Mitte: Latlng, // Setzen Sie den Mittelpunkt der Karte auf den angegebenen Koordinatenpunkt
MAPTYPEID: google.maps.maptypeid.roadmap // Kartentyp angeben
};
Erstellen Sie schließlich eine Karte und zeigen Sie sie auf der Seite an, die Erstellungsmethode lautet wie folgt
// Erstellen Sie eine Karte und zeigen Sie sie in der Seitenkarte an
var map = new Google.maps.map (document.getElementById ("map"), myoptions);
Am Ende werden alle Codes für dieses Beispiel vorgestellt. Der Code ist unten angezeigt.
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Holen Sie sich den aktuellen Standort und zeigen Sie ihn auf Google Maps </title> an
<script type = "text/javaScript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type = "text/javaScript">
Funktion init () {
if (navigator.geolocation) {
// Erhalten Sie den aktuellen geografischen Standort
navigator.geolocation.getCurrentPosition (Funktion (Position) {{
var coords = Position.coords;
//console.log(Position);
// Geben Sie einen Koordinatenpunkt auf Google Map an und geben Sie auch die horizontalen und vertikalen Koordinaten des Koordinatenpunkts an.
var latlng = new Google.maps.latlng (Coords.Latitude, Coords.longitude);
var myoptions = {
Zoom: 14, // Setzen Sie die Vergrößerung
Mitte: Latlng, // Setzen Sie den Mittelpunkt der Karte auf den angegebenen Koordinatenpunkt
MAPTYPEID: google.maps.maptypeid.roadmap // Kartentyp angeben
};
// Erstellen Sie eine Karte und zeigen Sie sie in der Seitenkarte an
var map = new Google.maps.map (document.getElementById ("map"), myoptions);
// Erstellen Sie Markierungen auf der Karte
var marker = new Google.maps.marker ({{
Position: latlng, // klicken Sie auf die oben festgelegten Koordinaten
Karte: Karte // Legen Sie diese Annotation in der gerade erstellten Karte fest, die Sie gerade erstellt haben
});
// Tag -Eingabeaufforderungfenster
var infowindow = new Google.maps.infowindow ({{
Inhalt: "Aktueller Standort: <br/> lang:" + latlng.lat () + "<br/> Dimension:" + latlng.lng () // Eingabeaufforderung in der Eingabeaufforderung Formular
});
// Öffnen Sie das Eingabeaufforderungfenster
Infowindow.open (Karte, Marker);
},
Funktion (Fehler) {
// Verarbeitungsfehler
Switch (error.code) {
Fall 1:
Alert ("Standortdienst verweigert.");
brechen;
Fall 2:
ALERT ("Standortinformationen können vorerst nicht erhalten werden.");
brechen;
Fall 3:
ALERT ("Informationszeitüberschreitung erhalten");
brechen;
Standard:
Alert ("Unbekannter Fehler.");
brechen;
}
});
} anders {
ALERT ("Ihr Browser unterstützt HTML5 nicht, um Geolokalisierungsinformationen zu erhalten.");
}
}
</script>
</head>
<body>
<div> </div>
</body>
</html>