HTMLGeolocationElement: watch-Eigenschaft

Wert

Ein boolescher Wert:

• Wenn true, werden Standortdaten kontinuierlich angefordert, als ob die Methode Geolocation.watchPosition() aufgerufen wurde.
• Wenn false, werden die Standortdaten nur einmal angefordert, als ob die Methode Geolocation.getCurrentPosition() aufgerufen wurde.

Standardmäßig false.

Beispiele

Grundlegende Verwendung

<geolocation watch></geolocation>

const geo = document.querySelector("geolocation");
console.log(geo.watch); // true

Kontinuierliche Abfrage von Standortdaten

In diesem Beispiel rufen wir kontinuierlich Standortdaten ab und geben sie auf der Seite aus.

HTML

Wir integrieren ein <geolocation>-Element mit einem watch Attribut. Wenn der Benutzer auf den resultierenden Button klickt und die Berechtigung zur Nutzung der geolocation Funktion erteilt, wird der Browser damit beginnen, kontinuierlich Standortdaten anzufordern, wann immer sich die Position des Geräts ändert. Wir fügen auch ein <p>-Element hinzu, um Standortdaten und Fehler auszugeben.

<geolocation watch></geolocation>
<p id="output"></p>

JavaScript

In unserem JavaScript greifen wir zunächst auf das Ausgabe-Absatz- und <geolocation>-Element zu und testen den watch Wert, indem wir die watch Eigenschaft abfragen.

const outputElem = document.querySelector("#output");
const geo = document.querySelector("geolocation");
console.log(geo.watch); // true

Anschließend fügen wir einen location Ereignislistener zu dem resultierenden HTMLGeolocationElement-Objekt hinzu, um zu erkennen, wann die Standortdatenanfrage zurückgegeben wird. Wenn die Daten erfolgreich zurückgegeben werden, greifen wir auf sie über die HTMLGeolocationElement.position Eigenschaft zu und geben die Breitengrad- und Längengradwerte im Ausgabeabsatz aus. Wenn die Datenanfrage fehlschlägt, greifen wir über die HTMLGeolocationElement.error Eigenschaft auf den Fehler zu und geben die Fehlermeldung im Ausgabeabsatz aus.

geo.addEventListener("location", () => {
  if (geo.position) {
    outputElem.textContent += `(${geo.position.coords.latitude},${geo.position.coords.longitude}), `;
  } else if (geo.error) {
    outputElem.textContent += `${geo.error.message}, `;
  }
});

Ergebnis

Sehen Sie sich diesen Code live in Aktion (Quellcode) an. Der vollständige Code beinhaltet auch einen Fallback für Browser, die das <geolocation>-Element nicht unterstützen.

Versuchen Sie, das Demo in einem unterstützten und einem nicht unterstützten Browser anzusehen, und beachten Sie den Unterschied im Ablauf des Berechtigungsdialogs, wenn Sie die Erlaubnis zur Nutzung der geolocation-Funktion erteilen oder verweigern.

Beachten Sie auch, dass, da das <geolocation> watch Attribut auf true gesetzt ist, die Standortdaten angefordert werden und das location Ereignis kontinuierlich ausgelöst wird, jedes Mal, wenn der Benutzer den Standort ändert.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <geolocation>-Element