Web Geolocation API

Der Standort des Benutzers wird lokalisiert

Das HTML Geolocation API wird verwendet, um den Standort des Benutzers zu ermitteln.

Da dies die Privatsphäre beeinträchtigen könnte, ist der Standort ohne Zustimmung des Benutzers nicht verfügbar.

Selbst ausprobieren

Anmerkung:Geolokalisierung ist für Geräte mit GPS (wie Smartphones) am genauesten.

Alle Browser unterstützen das Geolocation API:

Chrome IE Firefox Safari Opera
Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt

Anmerkung:Ab Chrome 50 wird das Geolocation API nur im sicheren Kontext, z.B. HTTPS, unterstützt. Wenn Ihre Seite auf einem nicht sicheren Quellcode (z.B. HTTP) gehostet wird, wird die Anfrage zur Erstellung der Benutzerposition nicht mehr funktionieren.

Verwenden Sie das Geolocation API

getCurrentPosition() Diese Methode wird verwendet, um die Position des Benutzers zurückzugeben.

Der folgende Beispiel gibt die Breite und Länge der Benutzerposition zurück:

Beispiel

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Diese Browser unterstützt keine Geolocation.";
  }
}
function showPosition(position) {
  x.innerHTML = "Breitengrad: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

Selbst ausprobieren

Beispielklärung:

  1. Überprüfen Sie, ob Geolocation unterstützt wird
  2. Falls unterstützt, führen Sie die Methode getCurrentPosition() aus. Wenn nicht, zeigen Sie dem Benutzer eine Nachricht an
  3. Wenn die Methode getCurrentPosition() erfolgreich ist, wird ein coordinates-Objekt an die Funktion zurückgegeben, die im Parameter (showPosition) angegeben ist
  4. Die Funktion showPosition() gibt Breiten- und Längengrade aus

Der obige Beispiel ist ein sehr einfaches Skript zur Geolokalisierung, ohne Fehlerbehandlung.

Fehler und Abweisungen verarbeiten

getCurrentPosition() Der zweite Parameter der Methode wird verwendet, um Fehler zu verarbeiten. Wenn die Benutzerposition nicht erhalten werden kann, wird die auszuführende Funktion festgelegt:

Beispiel

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Der Benutzer hat die Anfrage für die Geolocation abgelehnt.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Standortinformationen sind nicht verfügbar.";
      break;
    case error.TIMEOUT:
      x.innerHTML = "Die Anfrage zur Erstellung der Benutzerposition hat abgelaufen.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Ein unbekannter Fehler ist aufgetreten.";
      break;
  }
}

Selbst ausprobieren

Ergebnisse auf der Karte anzeigen

Um Ergebnisse auf der Karte anzuzeigen, müssen Sie auf die Kartendienste zugreifen, z.B. Google Maps.

In dem folgenden Beispiel werden die zurückgegebenen Breite und Länge verwendet, um den Standort auf einer Google-Karte anzuzeigen (verwendet statische Bilder):

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

Diese Seite zeigt, wie man den Standort des Benutzers auf einer Karte anzeigt.

Geolocation ist auch sehr nützlich für standortspezifische Informationen, z.B.:

  • Neueste lokale Informationen
  • Zeigt interessante Punkte in der Nähe des Benutzers an
  • Schritt-für-Schritt-Navigation (Turn-by-turn navigation) (GPS)

getCurrentPosition() Methode - Rückgabedaten

getCurrentPosition() Die Methode gibt bei Erfolg ein Objekt zurück. Es werden immer die Attribute Breite, Länge und Genauigkeit zurückgegeben. Wenn verfügbar, werden auch andere Attribute zurückgegeben:

Eigenschaften Rückgabe
coords.latitude Breitengrad in Dezimalzahl (immer zurückgegeben).
coords.longitude Längengrad in Dezimalzahl (immer zurückgegeben).
coords.accuracy Genauigkeit der Position (immer zurückgegeben).
coords.altitude Höhe über dem Meeresspiegel in Metern (wenn verfügbar, wird zurückgegeben).
coords.altitudeAccuracy Genauigkeit der Positionshöhe (wenn verfügbar, wird zurückgegeben).
coords.heading Kurs von nördlich her im Uhrzeigersinn (wenn verfügbar, wird zurückgegeben).
coords.speed Geschwindigkeit in Metern pro Sekunde (wenn verfügbar, wird zurückgegeben).
timestamp Antwortliche Datum/Zeit (wenn verfügbar, wird zurückgegeben).

Geolocation-Objekt - andere interessante Methoden

Der Geolocation-Objekt hat auch andere interessante Methoden:

  • watchPosition() - Gibt den aktuellen Standort des Benutzers zurück und gibt fortlaufend aktualisierte Positionen zurück, wenn der Benutzer sich bewegt (z.B. GPS in einem Auto).
  • clearWatch() - Beenden Sie die Methode watchPosition().

Der folgende Beispiel zeigt, watchPosition() Methode. Du benötigst 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 = "Diese Browser unterstützt keine Geolocation.";
  }
}
function showPosition(position) {
  x.innerHTML = "Breitengrad: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

Selbst ausprobieren