HTML -Geolocation-API
Die HTML Geolocation API wird verwendet, um die Position eines Benutzers zu lokalisieren.
Lokalisieren 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 stimmt ihr zu.
Hinweis: Die Geolokalisierung ist für Geräte mit GPS, wie z. B. Smartphones, am genauesten.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die Geolocation 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 Anfragen zum Abrufen des Benutzerstandorts nicht mehr.
Verwendung von HTML-Geolokalisierung
Die Methode getCurrentPosition() 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>
Try it Yourself »
Beispiel erklärt:
- Prüfen Sie, ob Geolokalisierung unterstützt wird
- Wenn unterstützt, führen Sie die Methode getCurrentPosition() 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 Methode getCurrentPosition() wird zur Fehlerbehandlung verwendet. Es gibt eine Funktion an, die ausgeführt werden soll, wenn der Standort des Benutzers nicht ermittelt 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;
}
}
Try it Yourself »
Standortspezifische Informationen
Auf dieser Seite wurde gezeigt, wie die Position eines Benutzers auf einer Karte angezeigt wird.
Geolocation ist auch für standortspezifische Informationen sehr nützlich, wie zum Beispiel:
- Aktuelle lokale Informationen
- Points-of-Interest in der Nähe des Benutzers anzeigen
- Turn-by-Turn-Navigation (GPS)
Die getCurrentPosition()-Methode – Rückgabedaten
Die Methode getCurrentPosition() gibt bei Erfolg ein Objekt zurück. Die Eigenschaften Breite, Länge und Genauigkeit werden immer zurückgegeben. Die anderen Eigenschaften werden zurückgegeben, sofern verfügbar:
| Eigentum | Kehrt zurück |
|---|---|
| coords.latitude | Der Breitengrad als Dezimalzahl (wird immer zurückgegeben) |
| coords.longitude | Der Längengrad als Dezimalzahl (wird immer zurückgegeben) |
| coords.accuracy | Die Genauigkeit der Position (wird immer zurückgegeben) |
| coords.altitude | Die Höhe in Metern über dem mittleren Meeresspiegel (wird zurückgegeben, falls verfügbar) |
| coords.altitudeAccuracy | Die Höhengenauigkeit der Position (wird zurückgegeben, falls verfügbar) |
| coords.heading | Der Kurs in Grad im Uhrzeigersinn von Norden (wird zurückgegeben, falls verfügbar) |
| coords.speed | Die Geschwindigkeit in Metern pro Sekunde (wird zurückgegeben, falls verfügbar) |
| timestamp | Datum/Uhrzeit der Antwort (wird zurückgegeben, falls verfügbar) |
Geolocation-Objekt – Weitere interessante Methoden
Das Geolocation-Objekt verfügt auch über 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 die MethodewatchPosition().
Das folgende Beispiel zeigt die Methode watchPosition(). Um dies zu testen, benötigen Sie ein genaues GPS-Gerät (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>
Try it Yourself »
