Web Geolocation API

ユーザーの位置を特定します

HTML Geolocation APIは、ユーザーの地理位置を取得するために使用されます。

プライバシーを損なう可能性があるため、ユーザーが承認しない限り、位置は利用できません。

自分で試してみる

注：GPSを搭載したデバイス（例えばスマートフォン）では、地理定位が最も正確です。

すべてのブラウザがGeolocation APIをサポートしています：

Chrome IE Firefox Safari Opera
サポート サポート サポート サポート サポート

注：Chrome 50から、Geolocation APIは安全なコンテキスト（例えば HTTPS）にのみ適用されます。あなたのサイトが非安全なソース（例えば HTTP）にホストされている場合、ユーザーの位置を取得するリクエストは機能しません。

Geolocation APIを使用する

getCurrentPosition() メソッドはユーザーの位置を返すために使用されます。

以下の例では、ユーザーの位置の緯度と経度を返します：

<script>

const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(showPosition);
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "このブラウザでは地理位置サービスがサポートされていません.";
  }
}
function showPosition(position) {
  x.innerHTML = "緯度: " + position.coords.latitude +
  "<br>経度: " + position.coords.longitude;
}
</script>

自分で試してみる

例説明：

  1. Geolocationのサポートを確認してください
  2. サポートされている場合、getCurrentPosition() メソッドを実行してください。サポートされていない場合、ユーザーにメッセージを表示します
  3. getCurrentPosition() メソッドが成功した場合、パラメータ (showPosition) で指定された関数に coordinates オブジェクトを返します
  4. showPosition() 関数は緯度と経度を出力します

上記の例は非常に基本的な地理定位スクリプトであり、エラー処理が含まれていません。

エラーと拒否の処理

getCurrentPosition() メソッドの二番目の引数はエラー処理に使用されます。ユーザーの位置を取得できない場合、実行する関数を指定します：

<script>

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable.";
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred.";
      break;
  }
}

自分で試してみる

地図に結果を表示

地図に結果を表示するには、地図サービスにアクセスする必要があります、例えば Google 地図。

以下の例では、返される緯度和経度が Google 地図上に位置を表示するために使用されます（静的画像を使用）：

<script>

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

位置情報

このページでは、地図上にユーザーの位置を表示する方法を示しています。

Geolocation は特定の位置情報に対しても非常に有用です、例えば：

  • 最新の地域情報
  • ユーザー周辺の興味のあるポイントを表示
  • 逐次ナビゲーション（Turn-by-turn navigation）(GPS)

getCurrentPosition() メソッド - 返されるデータ

getCurrentPosition() 成功した場合にオブジェクトを返すメソッド。常に緯度、経度、精度属性を返します。利用可能な場合には他の属性も返されます：

属性 返します
coords.latitude 十進数で表される緯度（常に返されます）。
coords.longitude 十進数で表される経度（常に返されます）。
coords.accuracy 位置精度（常に返されます）。
coords.altitude 平均海面以上の高さ（メートルで計算）（利用可能な場合に返されます）。
coords.altitudeAccuracy 位置の高さ精度（利用可能な場合に返されます）。
coords.heading 北から時計回りに向かう航向（利用可能な場合に返されます）。
coords.speed 速度（メートル/秒で、利用可能な場合に返されます）。
timestamp 応答の日時/時間（利用可能な場合に返されます）。

Geolocation オブジェクト - 他の面白いメソッド

Geolocation オブジェクトには他にも面白いメソッドがあります：

  • メソッド。テストするには正確な GPS デバイスが必要です（例えばスマートフォン）： - ユーザーの現在位置を返し、ユーザーが移動中（例えば、車内のGPS）で位置の更新を続けます。
  • clearWatch() - watchPosition() メソッドを停止します。

watchPosition() メソッド。テストするには正確な GPS デバイスが必要です（例えばスマートフォン）： インスタンス

<script>

const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(showPosition);
    else {
  }
    x.innerHTML = "このブラウザでは地理位置サービスがサポートされていません.";
  }
}
function showPosition(position) {
  x.innerHTML = "緯度: " + position.coords.latitude +
  "<br>経度: " + position.coords.longitude;
}
</script>

自分で試してみる