HTML5 Guide-4. Verwenden Sie die Geolokalisierung, um die Positionierungsfunktion zu implementieren

Autor：Eve Cole Aktualisierungszeit：2025-04-02 19:00:04

Wir möchten heute lernen, Geolokalisierung zu verwenden, um Positionierungsfunktionen zu implementieren. Wir können das Geolocation -Objekt durch Navigation.Geolocation erhalten, die die folgenden Methoden enthält:

GetCurrentPosition (Rückruf, Fehlercallback, Optionen): Erhalten Sie den aktuellen Standort;

Uhrenbeobachtung (Rückruf, Fehler, Optionen): Überwachen Sie die aktuelle Position;

ClearWatch (ID): Beenden Sie die Überwachung des aktuellen Standorts.

Hinweis: Der im folgende Beispiel verwendete Browser ist Chrom. Mit anderen Browsern kann ich nicht garantieren, dass die laufenden Ergebnisse mit den im Beispiel angezeigten Ergebnissen übereinstimmen.

1. Holen Sie sich den aktuellen Standort

Wir werden die GetCurrentPosition -Methode verwenden, um die aktuelle Position zu erhalten. Die Positionsinformationen werden nicht direkt in Form eines Ergebnisses zurückgegeben. Wir müssen die Rückruffunktion verwenden, um sie zu verarbeiten. Es wird eine Verzögerung beim Erhalten von Koordinaten geben, und Sie werden Sie auch um Zugriffsberechtigungen bitten. Schauen wir uns das folgende Beispiel an:

<! DocType html>

<html>

<kopf>

<title> Beispiel </title>

Tabelle {Border-Collapse: Zusammenbruch;}

th, td {padding: 4px;}

th {text-align: rechts;}

</style>

</head>

<body>

<tr>

<Th> Länge: </th>

<Th> Breite: </th>

</tr>

<tr>

<Th> Genauigkeit: </th>

</tr>

<tr>

<Th> Höhengenauigkeit: </th>

<Th> Überschrift: </th>

</tr>

<tr>

<Th> Geschwindigkeit: </th>

<Th> Zeitstempel: </th>

</tr>

</table>

navigator.geolocation.getCurrentPosition (Anzeigeposition);

Funktion Anzeigeposition (pos) {

Var -Eigenschaften = ['Longitude', 'Latitude', 'Höhe', 'Höhe', 'Genauigkeit', 'AltitudeAccuracy', 'Heading', 'Geschwindigkeit'];

für (var i = 0, len = properties.length; i <len; i ++) {

var value = pos.coords [Eigenschaften [i]];

document.getElementById (Eigenschaften [i]). Innerhtml = Wert;

}

document.getElementById ('timestamp'). Innerhtml = pos.timestamp;

}

</script>

</body>

</html>

Das zurückgegebene Positionsobjekt enthält zwei Eigenschaften: Koordeln: Koordinateninformationen zurückgeben; Zeitstempel: Die Zeit, um Koordinateninformationen zu erhalten. Unter ihnen enthält die Koordnungen die folgenden Eigenschaften: Breitengrad: Breitengrad; Länge: Länge; Höhe: Höhe; Genauigkeit: Genauigkeit (Meter); AltitudeAccuracy: Höhengenauigkeit (Meter); Überschrift: Reiserichtung; Geschwindigkeit: Reisegeschwindigkeit (Meter/Sekunde).

Nicht alle Informationen werden zurückgegeben, es hängt von dem Gerät ab, das Sie den Browser hosten. Mobile Geräte wie GPS, Beschleuniger und Kompass geben die meisten Informationen zurück, aber Heimcomputer funktionieren nicht. Die von einem Heimcomputer erhaltenen Standortinformationen hängen von der Netzwerkumgebung oder dem WLAN ab. Schauen wir uns die laufenden Ergebnisse des obigen Beispiels an.

Klicken Sie auf Zulassen, um Koordinateninformationen abzurufen.

2. Behandeln Sie Ausnahmen

Jetzt stellen wir die Ausnahmehandhabung von GetCurrentPosition ein, die mithilfe der Fehlercallback -Rückruffunktion implementiert wird. Der von der Funktion zurückgegebene Parameterfehler enthält zwei Eigenschaften: Code: Code des Fehlertyps; Meldung: Fehlermeldung. Der Code enthält drei Werte: 1: Der Benutzer ist nicht zur Verwendung der Geolokalisierung berechtigt; 2: Die Koordinateninformationen können nicht erhalten werden; 3: Die Informationszeitüberschreitung wird erhalten.

Schauen wir uns ein Beispiel unten an:

<! DocType html>

<html>

<kopf>

<title> Beispiel </title>

Tabelle {Border-Collapse: Zusammenbruch;}

th, td {padding: 4px;}

th {text-align: rechts;}

</style>

</head>

<body>

<tr>

<Th> Länge: </th>

<Th> Breite: </th>

</tr>

<tr>

<Th> Genauigkeit: </th>

</tr>

<tr>

<Th> Höhengenauigkeit: </th>

<Th> Überschrift: </th>

</tr>

<tr>

<Th> Geschwindigkeit: </th>

<Th> Zeitstempel: </th>

</tr>

<tr>

<Th> Fehlercode: </th>

<Th> Fehlermeldung: </th>

</tr>

</table>

navigator.geolocation.getCurrentPosition (Anzeigeposition, HandleError);

Funktion Anzeigeposition (pos) {

Var -Eigenschaften = ["Längengrad", "Breite", "Höhe", "Genauigkeit", "AltitudeAccuracy", "Überschrift", "Geschwindigkeit"];

für (var i = 0; i <Eigenschaften.length; i ++) {

var value = pos.coords [Eigenschaften [i]];

document.getElementById (Eigenschaften [i]). Innerhtml = Wert;

}

document.getElementById ("timestamp"). Innerhtml = pos.timestamp;

}

Funktion handleError (err) {

document.getElementById ("errcode"). innerHtml = err.code;

document.getElementById ("Errmessage"). Innerhtml = err.message;

}

</script>

</body>

</html>

Die Genehmigung wird abgelehnt, Betriebsergebnis:

3. Verwenden Sie die optionalen Parameterelemente Geolocation

Die Optionen in GetCurrentPosition (Callback, Fehlercallback, Optionen) haben die folgenden Parameter zu verwenden, EnableHighaccuracy: Verwenden Sie den besten Effekt. Zeitüberschreitung: Timeout (Millisekunden); Maximum: Geben Sie die Cache -Zeit (Millisekunden) an. Schauen wir uns das folgende Beispiel an:

<! DocType html>

<html>

<kopf>

<title> Beispiel </title>

Tabelle {Border-Collapse: Zusammenbruch;}

th, td {padding: 4px;}

th {text-align: rechts;}

</style>

</head>

<body>

<tr>

<Th> Länge: </th>

<Th> Breite: </th>

</tr>

<tr>

<Th> Genauigkeit: </th>

</tr>

<tr>

<Th> Höhengenauigkeit: </th>

<Th> Überschrift: </th>

</tr>

<tr>

<Th> Geschwindigkeit: </th>

<Th> Zeitstempel: </th>

</tr>

<tr>

<Th> Fehlercode: </th>

<Th> Fehlermeldung: </th>

</tr>

</table>

var options = {

EnableHighaccuracy: Falsch,

Zeitüberschreitung: 2000,

Maximum: 30000

};

navigator.geolocation.getCurrentPosition (Anzeigeposition, HandleError, Optionen);

Funktion Anzeigeposition (pos) {

Var -Eigenschaften = ["Längengrad", "Breite", "Höhe", "Genauigkeit", "AltitudeAccuracy", "Überschrift", "Geschwindigkeit"];

für (var i = 0; i <Eigenschaften.length; i ++) {

var value = pos.coords [Eigenschaften [i]];

document.getElementById (Eigenschaften [i]). Innerhtml = Wert;

}

document.getElementById ("timestamp"). Innerhtml = pos.timestamp;

}

Funktion handleError (err) {

document.getElementById ("errcode"). innerHtml = err.code;

document.getElementById ("Errmessage"). Innerhtml = err.message;

}

</script>

</body>

</html>

4. Überwachen Sie die Standortänderungen

Im Folgenden stellen wir die Verwendung der Uhrzuschachungsmethode zur Implementierung von Positionsänderungen vor. Die Nutzungsmethode ist die gleiche wie GetCurrentPosition. Schauen wir uns das Beispiel an:

<! DocType html>

<html>

<kopf>

<title> Beispiel </title>

Tabelle {Border-Collapse: Zusammenbruch;}

th, td {padding: 4px;}

th {text-align: rechts;}

</style>

</head>

<body>

<tr>

<Th> Länge: </th>

<Th> Breite: </th>

</tr>

<tr>

<Th> Genauigkeit: </th>

</tr>

<tr>

<Th> Höhengenauigkeit: </th>

<Th> Überschrift: </th>

</tr>

<tr>

<Th> Geschwindigkeit: </th>

<Th> Zeitstempel: </th>

</tr>

<tr>

<Th> Fehlercode: </th>

<Th> Fehlermeldung: </th>

</tr>

</table>

<button id = "drücken

var options = {

EnableHighaccuracy: Falsch,

Zeitüberschreitung: 2000,

Maximum: 30000

};

var watchid = navigator.geolocation.watchPosition (Anzeigeposition, HandleError, Optionen);

Document.GetElementById ("PressMe"). Onclick = Funktion (e) {

Navigator.Geolocation.ClearWatch (WatchID);

};

Funktion Anzeigeposition (pos) {

Var -Eigenschaften = ["Längengrad", "Breite", "Höhe", "Genauigkeit", "AltitudeAccuracy", "Überschrift", "Geschwindigkeit"];

für (var i = 0; i <Eigenschaften.length; i ++) {

var value = pos.coords [Eigenschaften [i]];

document.getElementById (Eigenschaften [i]). Innerhtml = Wert;

}

document.getElementById ("timestamp"). Innerhtml = pos.timestamp;

}

Funktion handleError (err) {

document.getElementById ("errcode"). innerHtml = err.code;

document.getElementById ("Errmessage"). Innerhtml = err.message;

}

</script>

</body>

</html>

Wenn auf die Schaltfläche Abbrechen angeklickt wird, stoppt die Überwachung.

Demo -Download -Adresse: html5guide.geolocation.zip