Geolocation APIは、デバイスの現在の位置座標を取得できる非常にシンプルなAPIです。 getCurrentPositionwatchPositionの2つのメソッドしかなく、返されるデータは非常に簡単ですが、マッピングAPIと組み合わせると、複雑な位置認識Webアプリを作成できます。

設定

何かをする前に、APIがユーザーのブラウザで利用可能かどうかを確認する必要があります。

if (navigator.geolocation) {
  // 🗺️ yep, we can proceed!
} else {
  // no can do
}

APIを機能させるには、ウェブサイトまたはアプリをhttps経由で提供する必要があることに注意してください。 ローカル開発の場合、htmlファイルを直接開くのではなく、ローカルサーバーを実行することをお勧めします。 マシンでnpm5.2 以上を使用できる場合は、npxを使用してhttpサーバーをすばやく実行できます。

$ npx http-server

getCurrentPosition

getCurrentPosition メソッドを使用して、ユーザーの座標を1回取得します。 最初で唯一必要な引数は、位置要求が成功した場合に位置オブジェクトで呼び出される成功コールバック関数である必要があります。

デバイスの経度と緯度をコンソールに出力する簡単な例を次に示します。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(displayLocationInfo);
}

function displayLocationInfo(position) {
  const lng = position.coords.longitude;
  const lat = position.coords.latitude;

  console.log(`longitude: ${ lng } | latitude: ${ lat }`);
}

成功コールバックに渡される位置オブジェクトの形状とサンプルデータは次のとおりです。

coords:
  accuracy: 52
  altitude: null
  altitudeAccuracy: null
  heading: null
  latitude: 27.380583
  longitude: 33.631839
  speed: null
timestamp: 1509152059444

上記の例からわかるように、coordsの一部のプロパティの値はnullである可能性があります。 データの可用性は、使用中のデバイスの機能によって異なります。 見出しの値は、もしあれば、真北に関連して時計回りに度で表示され、速度の値は、もしあれば、メートル/秒で表示されます。

許可

位置情報は潜在的に機密性が高いため、ドメインがユーザーの位置を取得するために初めて呼び出しを行うと、ブラウザーは次のようなウィジェットを表示してユーザーに許可を求めます。

Geolocation permission widget

ユーザーがアクセスを拒否した場合、エラーコールバックがある場合は、エラーコード1( PERMISSION_DENIED )で呼び出されます。

watchPosition

watchPosition メソッドもあり、デバイスが大幅に位置を変更するたびに新しい位置データを返します。

次の例では、ポジションウォッチャーを開始し、15秒後に停止します。

const watcher = navigator.geolocation.watchPosition(displayLocationInfo);

setTimeout(() => {
  navigator.geolocation.clearWatch(watcher);
}, 15000);

function displayLocationInfo(position) {
  // ...do something with the data each time
}

clearWatch とウォッチャーIDを使用して、位置データの監視を停止します。

エラー処理

getCurrentPositionまたはwatchPositionの2番目の引数として、エラーハンドラコールバックを指定できます。 エラーコールバックが呼び出されると、エラーオブジェクトが渡され、値が3( TIMEOUT )、2( POSITION_UNAVAILABLE)のcodeプロパティが含まれます。エラーの性質に応じて、)または1( PERMISSION_DENIED )。

タイムアウト値を0msに設定して、自動エラーをトリガーする簡単な例を次に示します。

navigator.geolocation.getCurrentPosition(displayLocationInfo, handleLocationError, { timeout: 0 });

function displayLocationInfo(position) {
  // ...do stuff
}

function handleLocationError(error) {
  switch (error.code) {
    case 3:
      // ...deal with timeout
      break;
    case 2:
      // ...device can't get data
      break;
    case 1:
      // ...user said no ☹️
  }
}

オプション

最後に、次のオプションを使用して3番目の引数を渡すことができます。

  • enableHighAccuracy :ブール値を取り、デフォルトはfalseです。 位置情報を可能な限り正確にする必要があるかどうかを示します(精度が高いほど、CPUとバッテリーの使用量の点でコストがかかる可能性があります)。
  • maximumAge :位置データをキャッシュしておくミリ秒数。 デフォルト値は0です。
  • timeout :データが取得されていない場合にエラーコールバックが呼び出されるまでのミリ秒数。

maximumAgeおよびtimeoutにオプションが渡された例を次に示します。

navigator.geolocation.getCurrentPosition(
  displayLocationInfo,
  handleLocationError,
  { maximumAge: 1500000, timeout: 0 }
);

function displayLocationInfo(position) {
  const lng = position.coords.longitude;
  const lat = position.coords.latitude;

  console.log(`longitude: ${lng} | latitude: ${lat}`);
}

function handleLocationError(error) {
  switch (error.code) {
    case 3:
      // timeout was hit, meaning nothing's in the cache
      // let's provide a default location:
      displayLocationInfo({ coords: { longitude: 33.631839, latitude: 27.380583 } });

      // now let's make a non-cached request to get the actual position
      navigator.geolocation.getCurrentPosition(displayLocationInfo, handleLocationError);
      break;
    case 2:
      // ...
      break;
    case 1:
    // ...
  }
}

利用可能なキャッシュされた位置データがあり、それが最大25分(1500000ms)古い場合は、それを返します。 そうでない場合は、すぐにエラーアウトします( 0ms タイムアウトを使用)。 タイムアウトのエラーハンドラの場合、デフォルトの場所の値を指定してから、別の呼び出しを行って新しい場所のデータを取得します。 このようにして、アプリは、新しい位置データが収集されている間、空白の状態を表示することを回避できます。

ブラウザのサポート

ジオロケーションを使用できますか? caniuse.comの主要なブラウザーでのジオロケーション機能のサポートに関するデータ。