Web-Geolocation-API
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.
Die Geolocation API wird in allen Browsern unterstützt:
| Yes | Yes | Yes | Yes | Yes |
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.
Verwenden der Geolocation-API
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>
const 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
- Führen Sie, sofern unterstützt, 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 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;
}
}
Anzeigen des Ergebnisses in einer Karte
Um das Ergebnis auf einer Karte anzuzeigen, benötigen Sie Zugriff auf einen Kartendienst wie Google Maps.
Im folgenden Beispiel wird der zurückgegebene Breiten- und Längengrad verwendet, um den Standort in einer Google-Karte anzuzeigen (unter Verwendung eines statischen Bildes):
Beispiel
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
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>
const 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>