Verwenden Sie Geolocation in HTML5, um den geografischen Standort zu ermitteln, und rufen Sie die Google Map-API auf, um auf Google Map_html5-Tutorial-Fähigkeiten zu lokalisieren

Diese Beilage habe gerade mit dem Erlernen von HTML5 begonnen, und jetzt interessiere ich mich sehr für Geolokalisierung. Ich habe sie mit der API von Google Map kombiniert, um die grundlegende Kartenpositionierungsfunktion zu realisieren.
1. Ermitteln Sie den aktuellen geografischen Standort
Rufen Sie die Methode void getCurrentPosition(onSuccess, onError, options); auf.
Unter diesen ist onSuccess die Rückruffunktion, die ausgeführt wird, wenn die aktuellen Standortinformationen erfolgreich abgerufen werden können, onError ist die Rückruffunktion, die ausgeführt wird, wenn die aktuellen Standortinformationen nicht abgerufen werden können, und Optionen sind einige optionale bekannte Listen. Der zweite und dritte Parameter sind optionale Attribute.
In der onSuccess-Rückruffunktion wird der Parameter position verwendet, der ein bestimmtes Positionsobjekt darstellt und die aktuelle Position darstellt. Es verfügt über die folgenden Attribute:
•Breitengrad: der Breitengrad des aktuellen geografischen Standorts.
•Längengrad: Der Längengrad des aktuellen geografischen Standorts.
•Höhe: die Höhe des aktuellen Standorts (null, wenn sie nicht ermittelt werden kann).
•Genauigkeit: Die Genauigkeit der erhaltenen Breiten- und Längengrade (in Metern).
•altitudeAccurancy: Der Längengrad der ermittelten Höhe (in Metern).
•Überschrift: Die Vorwärtsrichtung des Geräts. Dargestellt durch den Drehwinkel im Uhrzeigersinn in Richtung des Objekts (null, wenn dieser nicht ermittelt werden kann).
•Geschwindigkeit: Die Vorwärtsgeschwindigkeit des Geräts (in Metern/Sekunde, null, wenn sie nicht ermittelt werden kann).
•Zeitstempel: Der Zeitpunkt, zu dem die geografischen Standortinformationen abgerufen wurden.

In der Callback-Funktion onError wird der Fehlerparameter verwendet. Es hat die folgenden Attribute:
•code: Fehlercode, mit den folgenden Werten.
1. Der Benutzer hat den Standortdienst abgelehnt (Attributwert ist 1); ).
•message: Zeichenfolge mit spezifischen Fehlerinformationen.

Im Optionsparameter lauten die optionalen Attribute wie folgt:
•enableHighAccuracy: Ob hochpräzise geografische Standortinformationen erforderlich sind.
•Timeout: Stellen Sie das Timeout ein (Einheit: Millisekunden).
•maximumAge: Gültige Zeit für die Zwischenspeicherung geografischer Standortinformationen (Einheit: Millisekunden).
Schreiben Sie unbedingt den folgenden Code, um festzustellen, ob der Browser HTML5 unterstützt, um geografische Standortinformationen zu erhalten, damit er mit früheren Browsern kompatibel ist, die dies nicht unterstützen.

Code kopierenDer Code lautet wie folgt:

if (navigator.geolocation) {

//Erhalten Sie die aktuellen geografischen Standortinformationen
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
alert("Ihr Browser unterstützt kein HTML5, um den geografischen Standort zu ermitteln Informationen." ; Wie unten gezeigt.

Code kopieren
Der Code lautet wie folgt:

Zweitens legen Sie die Kartenparameter fest und Einstellungsmethode Wie unten gezeigt.

Code kopieren

Der Code lautet wie folgt:

//Geben Sie eine Koordinate an Google Maps-Punkt, geben Sie gleichzeitig die Abszisse und die Ordinate des Koordinatenpunkts an

var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); var myOptions = { zoom : 14, / /Stellen Sie den Vergrößerungsfaktor eincenter: latlng, //Setzen Sie den Kartenmittelpunkt auf den angegebenen KoordinatenpunktmapTypeId: google.maps.MapTypeId.ROADMAP //Geben Sie den Kartentyp an

} ;

Erstellen Sie abschließend die Karte und zeigen Sie sie auf der Seite an. Die Erstellungsmethode ist wie folgt:





Code kopieren

Der Code 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); Abschließend präsentiere ich alle Codes für dieses Beispiel. Der Code wird unten angezeigt.

Code kopieren

Der Code lautet wie folgt:

http-equiv="Content-Type" content="text/html; charset=utf-8" /> Aktuellen Standort abrufen und auf Google Maps anzeigen ;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> javascript">
function init() {
if (navigator.geolocation) {
//Erhalten Sie den aktuellen geografischen Standort
navigator.geolocation.getCurrentPosition(function (position) {
var coords = position.coords;
//console.log(position);
//Geben Sie einen Koordinatenpunkt auf der Google-Karte an und geben Sie die Abszisse und Ordinate des Koordinatenpunkts an
var latlng = new google .maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //Legen Sie den Vergrößerungsfaktor fest
center: latlng, //Setzen Sie den Kartenmittelpunkt auf „Specified“. Koordinatenpunkt
mapTypeId: google.maps.MapTypeId.ROADMAP //Kartentyp angeben
};
//Eine Karte erstellen und auf der Seite anzeigen
var map = new google.maps . Map(document.getElementById("map"), myOptions);
//Eine Markierung auf der Karte erstellen
var marker = new google.maps.Marker({
position: latlng, //Ändern Sie die front Beschriften Sie die festgelegten Koordinaten
map: map //Legen Sie die Beschriftung in der gerade erstellten Karte fest
}
//Markieren Sie das Eingabeaufforderungsfenster
var infoWindow = new google.maps.InfoWindow ({
Inhalt: „Aktueller Standort:
Längengrad:“ latlng.lat() „
Dimension:“ latlng.lng() //Prompt-Informationen im Prompt-Formular
}) ;
//Öffnen Sie das Eingabeaufforderungsfenster
infoWindow.open(map, marker);
},
function (error) {
//Handle Fehler
switch ( error.code ) {
Fall 1:
alert("Standortdienst verweigert. ");
break;
case 2:
alert("Die Standortinformationen können vorübergehend nicht abgerufen werden.");
break;
case 3:
alert("Timeout to Informationen abrufen." . ");
break;
alert("Unbekannter Fehler."}
}); {
warning("Ihr Browser unterstützt kein HTML5 zum Abrufen von Geolokalisierungsinformationen."); body onload="init()">

< /html>