Geolocation-API

Inhaltsverzeichnis

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 beeinträchtigen kann, ist die Position nur verfügbar, wenn der Benutzer dies genehmigt.

Notiz

Die Geolokalisierung ist für Geräte mit GPS, wie etwa Smartphones, am genauesten.

Browser-Unterstützung

Die Geolocation-API wird in allen Browsern unterstützt:


Yes	Yes	Yes	Yes	Yes

Notiz

Die Geolocation-API funktioniert nur in sicheren Kontexten, z als HTTPS.

Wenn Ihre Website auf einem nicht sicheren Ursprung (z. B. HTTP) gehostet wird, ist die Anfragen, den Standort des Benutzers zu ermitteln, funktionieren nicht mehr.

Verwendung der Geolocation-API

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>
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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<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>

</body>
</html>

Beispiel erklärt:

Überprüfen Sie, ob Geolocation 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 Handhabung verwendet Fehler. 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;
    }
 }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

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;
  }
}
</script>

</body>
</html>

Anzeige des Ergebnisses in einer Karte

Um das Ergebnis in einer Karte anzuzeigen, benötigen Sie Zugriff auf einen Kartendienst wie Google Karten.

Im folgenden Beispiel werden die zurückgegebenen Breiten- und Längengrade verwendet, um den Standort in Google anzuzeigen Karte (mit einem statischen Bild):

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+"'>";
 }

Versuch es selber

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

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&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

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;
  }
}
</script>

</body>
</html>

So zeigen Sie eine interaktive Google Map mit Markierungs-, Zoom- und Ziehoptionen an.

Google Map-Skript

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  const latlon = new google.maps.LatLng(lat, lon)
  const mapholder = document.getElementById('mapholder')
  mapholder.style.height = '250px';
  mapholder.style.width = '500px';

  var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  }
    
  const map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
  const marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

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;
  }
}
</script>

</body>
</html>

Standortspezifische Informationen

Auf dieser Seite wurde gezeigt, wie die Position eines Benutzers auf einer Karte angezeigt wird.

Geolokalisierung ist auch für standortspezifische Informationen sehr nützlich, wie zum Beispiel:

Aktuelle lokale Informationen
Zeigt Sehenswürdigkeiten in der Nähe des Benutzers an
Turn-by-Turn-Navigation (GPS)

Die getCurrentPosition()-Methode - Rückgabedaten

Die Methode getCurrentPosition() gibt bei Erfolg ein Objekt zurück. Der Breitengrad, Längengrad- und Genauigkeitseigenschaften werden immer zurückgegeben. Die anderen Eigenschaften werden zurückgegeben wenn verfügbar:

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 außerdem über weitere interessante Methoden:

watchPosition() - Gibt die aktuelle Position des Benutzers zurück und fährt damit fort Gibt die aktualisierte Position zurück, wenn sich der Benutzer bewegt (wie das GPS in einem Auto).
clearWatch() - Stoppt die Methode watchPosition().

Das folgende Beispiel zeigt die Methode watchPosition(). Um dies zu testen, benötigen Sie ein genaues GPS-Gerät (z 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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<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>

</body>
</html>