HTML5 地理定位

HTML5 Geolocation（地理定位）は、ユーザーの位置を定位するために使用されます。

実際に試してみてください：Google Maps上にあなたの位置を表示する

ユーザーの位置を定位する

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

この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーが同意しない限り、ユーザーの位置情報は利用できません。

ブラウザのサポート

Internet Explorer 9、Firefox、Chrome、Safari、Operaは地理定位をサポートしています。

注：GPSを搭載したデバイス（iPhoneなど）では、地理定位がより正確です。

HTML5 - 地理定位の使用

getCurrentPosition() メソッドを使用してユーザーの位置を取得してください。

以下の例は、ユーザーの位置の経度和緯度を返す簡単な地理定位の例です。

例

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

自分で試してみる

例説明：

  • 地理定位のサポートを検出します。
  • サポートされている場合、getCurrentPosition() メソッドを実行します。サポートされていない場合、ユーザーにメッセージを表示します。
  • getCurrentPosition() が成功した場合、showPositionに指定された関数にcoordinatesオブジェクトを返します。
  • showPosition() 関数は、経度和緯度を取得し表示します。

上記の例は、基本的な地理定位スクリプトで、エラー処理を含んでいません。

エラーと拒否の処理

getCurrentPosition() メソッドの第2引数は、ユーザー位置の取得に失敗した場合に実行される関数を処理するために使用されます。以下のようになります：

例

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="ユーザーが位置情報のリクエストを拒否しました。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置情報が利用できません。"
      break;
    case error.TIMEOUT:
      x.innerHTML="ユーザーの場所を取得するリクエストがタイムアウトしました。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知のエラーが発生しました。"
      break;
    }
  }

自分で試してみる

エラーコード：

  • パーミッションが拒否されました - ユーザーは地理的な位置情報の使用を許可されていません
  • 位置情報が利用できない - 現在の位置を取得できません
  • タイムアウト - 操作がタイムアウトしました

地図上に結果を表示

地図上に結果を表示するには、経度緯度を使用できる地図サービス（Google MapsやBaidu Mapsなど）にアクセスする必要があります：

例

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

自分で試してみる

上記の例では、返された経度緯度データを使用して Google Maps に位置を表示しています（静的な画像を使用しています）。

Google Maps スクリプト

上記のリンクでは、マーク、ズーム、ドラッグオプション付きのインタラクティブな地図を表示するスクリプトの使用方法を示しています。

特定の位置の情報

このページでは、地図上にユーザーの位置を表示する方法を説明しています。しかし、地理的な位置情報は特定の位置の情報にも非常に役立ちます。

例：

  • ローカル情報の更新
  • ユーザーの周辺の興味のあるポイントを表示
  • インタラクティブな車載ナビゲーションシステム (GPS)

getCurrentPosition() メソッド - 返却データ

成功した場合、getCurrentPosition() メソッドはオブジェクトを返します。常に latitude、longitude そして accuracy 属性が返されます。利用可能な場合、以下の属性も返されます。

属性 説明
coords.latitude 十進数の緯度
coords.longitude 十進数の経度
coords.accuracy 位置精度
coords.altitude 海抜、海面以上のメートルで計測
coords.altitudeAccuracy 位置の高度精度
coords.heading 方向、正北から始まり度で計算
coords.speed 速度、毎秒メートルで計算
timestamp 応答の日付/時間

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

watchPosition() - ユーザーの現在位置を返し、ユーザーが移動するたびに更新位置を返します（車載 GPS に似ています）。

clearWatch() - watchPosition() メソッドを停止

以下は watchPosition() メソッドの例です。この例をテストするには、正確な GPS デバイスが必要です（例えば iPhone）:

例

<script>
var 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>

自分で試してみる