HTMLGeolocationElement: watch プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

watch は HTMLGeolocationElement インターフェイスのプロパティで、ユーザーの端末位置が変更されるたびにブラウザーが位置データを継続的に更新すべきか、それとも一度だけ取得すべきかを示す論理値を取得および設定します。

これは <geolocation> の watch 属性の値を反映します。

値

論理値です。

true の場合、位置データは継続的にリクエストされます。Geolocation.watchPosition() メソッドが呼び出された場合と同様です。
false の場合、位置データは一度だけリクエストされます。Geolocation.getCurrentPosition() メソッドが呼び出された場合と同様です。

デフォルトは false です。

例

基本的な使い方

html

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

位置データを継続的に取得

この例では、位置データを継続的に取得し、ページに表示します。

HTML

<geolocation> 要素を設置し、これに watch 属性を設定しています。ユーザーが結果として表示されるボタンをクリックし、geolocation 機能の使用権限を付与すると、ユーザーの端末の位置が変化するたびに、ブラウザーは位置データを継続的にリクエストし始めます。また、位置データやエラーを出力するための <p> 要素も設置しています。

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

JavaScript

JavaScript では、まず出力段落と <geolocation> 要素への参照を取得し、watch プロパティにアクセスして watch 値を検査します。

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

次に、location イベントリスナーを結果として得られる HTMLGeolocationElement オブジェクトに追加し、位置データリクエストが返されるタイミングを検出します。データが正常に返された場合、HTMLGeolocationElement.position プロパティ経由でアクセスし、緯度と経度の値を出力段落に表示します。データリクエストが失敗した場合、HTMLGeolocationElement.error プロパティ経由でエラーにアクセスし、エラーメッセージを出力段落に表示します。

js
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}, `;
  }
});