HTMLGeolocationElement: watch-Eigenschaft

Wert

Ein boolescher Wert:

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

Standardmäßig false.

Beispiele

Grundlegende Verwendung

<geolocation watch></geolocation>

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

Standortdaten kontinuierlich abrufen

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

HTML

Wir fügen ein <geolocation>-Element mit einem watch-Attribut ein. Wenn der Benutzer auf die resultierende Schaltfläche klickt und die Erlaubnis zur Nutzung der geolocation-Funktion erteilt, beginnt der Browser, Standortdaten kontinuierlich anzufordern, wann immer sich die Position des Geräts ändert. Außerdem fügen wir ein <p>-Element ein, um Standortdaten und Fehler auszugeben.

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

JavaScript

In unserem JavaScript beginnen wir damit, Referenzen auf den Ausgabepunkt und das <geolocation>-Element zu erfassen und testen den watch-Wert, indem wir auf die watch-Eigenschaft zugreifen.

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

Als Nächstes fügen wir dem resultierenden HTMLGeolocationElement-Objekt einen location-Ereignislistener hinzu, um zu erkennen, wann die Standortdatenanforderung zurückgegeben wird. Wenn die Daten erfolgreich zurückgegeben werden, greifen wir über die HTMLGeolocationElement.position-Eigenschaft darauf zu und geben die Breiten- und Längengradwerte in das Ausgabeelement aus. Wenn die Datenanforderung fehlschlägt, greifen wir über die HTMLGeolocationElement.error-Eigenschaft auf den Fehler zu und geben die Fehlermeldung im Ausgabeelement 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 enthält auch einen Fallback für Browser, die das <geolocation>-Element nicht unterstützen.

Versuchen Sie, die Demo in einem unterstützten und einem nicht unterstützten Browser anzuzeigen, wenn möglich, und beachten Sie den Unterschied im Berechtigungsdialog, wenn Sie die Erlaubnis zur Nutzung von geolocation gewähren oder verweigern.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <geolocation>-Element