位置情報 API

位置情報 (Geolocation) API を使用すると、ユーザーが望む場合には、自分の位置情報をウェブアプリケーションに提供することができます。プライバシー上の理由から、ユーザーは位置情報を報告する許可を求められます。

Geolocation オブジェクトを使用する WebExtension では、マニフェストに "geolocation" パーミッションを追加しなければなりません。ユーザーのオペレーティングシステムは、最初に要求されたときに位置情報へのアクセスを許可するようにユーザーに促します。

概念と使用方法

ウェブアプリでユーザーの位置情報を取得したいと思うことはよくあります。例えば、ユーザーの位置を地図上にプロットしたり、ユーザーの位置に関連するパーソナライズされた情報を表示したりすることができます。

位置情報 APIは navigator.geolocation への呼び出しを介してアクセスします。これにより、ブラウザーはユーザーに自分の位置情報にアクセスする許可を要求します。ユーザーが許可すると、ブラウザーは端末上で利用可能な最良の機能を使用してこの情報にアクセスします (GPS など)。

開発者は、いくつかの異なる方法でこの位置情報にアクセスできるようになりました。

• Geolocation.getCurrentPosition(): 端末の現在の位置を受け取ります。
• Geolocation.watchPosition(): 端末の位置が変化するごとに自動的に呼び出され、更新された位置情報を返すハンドラー関数を登録します。

どちらの場合も、メソッド呼び出しには最大3つの引数を取ります。

• 成功コールバック (必須): 位置情報の取得に成功した場合、このコールバックが GeolocationPosition オブジェクトを唯一の引数として実行され、位置情報へのアクセスを提供します。
• エラーコールバック (オプション): 位置情報の検索に失敗した場合、このコールバックが GeolocationPositionError オブジェクトを唯一の引数として実行され、何が問題となったかに関するアクセス情報を提供します。
• 位置データを取得するためのオプションを提供するオプションの PositionOptions オブジェクト。

位置情報の使用に関するさらなる情報は、位置情報 API の使用を参照してください。

インターフェイス

Geolocation

この API のメインクラスです。ユーザーの現在位置の取得、位置の変化の監視、および以前に設定した管理のクリアを行うメソッドが含まれています。

GeolocationPosition

ユーザの位置を表します。 GeolocationPosition インスタンスは、 Geolocation に含まれるメソッドのいずれかの呼び出しが成功した場合に、成功コールバックの内部で返され、タイムスタンプと GeolocationCoordinates オブジェクトのインスタンスが含まれます。

GeolocationCoordinates

ユーザーの位置の座標を表します。 GeolocationCoordinates のインスタンスには、緯度、経度、その他の重要な関連情報が含まれています。

GeolocationPositionError

GeolocationPositionError は、 Geolocation に含まれるメソッドのいずれかの呼び出しに失敗した場合、エラーコールバック内で返され、エラーコードとメッセージが含まれています。

Navigator.geolocation

API のエントリーポイント。 Geolocation オブジェクトのインスタンスを返し、そこから他のすべての機能にアクセスすることができます。

辞書

PositionOptions

Geolocation.getCurrentPosition() と Geolocation.watchPosition() の引数として渡すオプションを含むオブジェクトを表します。

例

以下の例では、 Geolocation API はユーザーの経度と緯度を取得するために使用されます。成功した場合、その位置を表示する openstreetmap.org の URL の有効なハイパーリンクが表示されます。

body {
  padding: 20px;
  background-color:#ffffc9
}

button {
  margin: .5rem 0;
}

HTML

<button id = "find-me">Show my location</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

JavaScript

function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
  }

  function error() {
    status.textContent = 'Unable to retrieve your location';
  }

  if(!navigator.geolocation) {
    status.textContent = 'Geolocation is not supported by your browser';
  } else {
    status.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

結果

仕様書

ブラウザーの互換性

可用性

WiFi ベースの測位は Google が提供することが多いため、中国ではバニラの位置情報 API が利用できない場合があります。 Baidu, Autonavi, Tencent などの地域ののサードパーティプロバイダを使用することができます。これらのサービスは、ユーザーの IP アドレスおよび/またはローカルアプリを使用して、より高度な位置情報を提供します。

関連情報

• Using the Geolocation API
• Geolocation API on w3.org
• Who moved my geolocation? (Hacks blog)