HTML -Geolocation-API
Die HTML-Geolocation-API wird verwendet, um die Position eines Benutzers zu lokalisieren.
Suchen Sie die Position des Benutzers
Die HTML-Geolocation-API wird verwendet, um die geografische Position eines Benutzers zu ermitteln.
Da dies die Privatsphäre gefährden kann, ist die Position nicht verfügbar, es sei denn, der Benutzer genehmigt sie.
Hinweis: Die Geolokalisierung ist am genauesten für Geräte mit GPS, wie z. B. Smartphones.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die Geolokalisierung vollständig unterstützt.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Hinweis: Ab Chrome 50 funktioniert die Geolocation-API nur in sicheren Kontexten wie HTTPS. Wenn Ihre Website auf einem nicht sicheren Ursprung (z. B. HTTP) gehostet wird, funktionieren die Anforderungen zum Abrufen des Benutzerstandorts nicht mehr.
Verwendung von HTML-Geolokalisierung
Die getCurrentPosition()Methode wird verwendet, um die Position des Benutzers zurückzugeben.
Das folgende Beispiel gibt den Breiten- und Längengrad der Position des Benutzers zurück:
Beispiel
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Beispiel erklärt:
- Überprüfen Sie, ob Geolokalisierung unterstützt wird
- Falls unterstützt, führen Sie die getCurrentPosition()-Methode aus. Wenn nicht, zeigen Sie dem Benutzer eine Nachricht an
- Wenn die Methode getCurrentPosition() erfolgreich ist, gibt sie ein Koordinatenobjekt an die im Parameter (showPosition) angegebene Funktion zurück.
- Die Funktion showPosition() gibt den Breiten- und Längengrad aus
Das obige Beispiel ist ein sehr einfaches Geolocation-Skript ohne Fehlerbehandlung.
Umgang mit Fehlern und Ablehnungen
Der zweite Parameter der getCurrentPosition()Methode dient der Fehlerbehandlung. Es gibt eine Funktion an, die ausgeführt werden soll, wenn der Standort des Benutzers nicht abgerufen werden kann:
Beispiel
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Standortspezifische Informationen
Auf dieser Seite wurde gezeigt, wie die Position eines Benutzers auf einer Karte angezeigt wird.
Geolokalisierung ist auch sehr nützlich für ortsspezifische Informationen, wie:
- Aktuelle lokale Informationen
- Points-of-Interest in der Nähe des Benutzers anzeigen
- Turn-by-Turn-Navigation (GPS)
Die Methode getCurrentPosition() - Daten zurückgeben
Die getCurrentPosition()Methode gibt bei Erfolg ein Objekt zurück. Die Breitengrad-, Längengrad- und Genauigkeitseigenschaften werden immer zurückgegeben. Die anderen Eigenschaften werden zurückgegeben, falls verfügbar:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
Geolokalisierungsobjekt - Andere interessante Methoden
Das Geolocation-Objekt hat auch andere interessante Methoden:
watchPosition()- Gibt die aktuelle Position des Benutzers zurück und gibt weiterhin die aktualisierte Position zurück, wenn sich der Benutzer bewegt (wie das GPS in einem Auto).clearWatch()- Stoppt diewatchPosition()Methode.
Das folgende Beispiel zeigt die watchPosition()Methode. Sie benötigen ein genaues GPS-Gerät, um dies zu testen (z. B. ein Smartphone):
Beispiel
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>