HTML5 地理的な位置
- 前のページ HTML5 追移
- 次のページ HTML5 ドラッグ＆ドロップ
HTML5 Geolocation（地理定位）は、ユーザーの位置を定位するために使用されます。
ユーザーの位置を定位
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 に位置を表示しています（静的な画像を使用しています）。
上記のリンクでは、マーク、ズーム、ドラッグオプション付きのインタラクティブな地図を表示するスクリプトの使用方法を示しています。
特定の位置の情報
このページでは、地図上にユーザーの位置を表示する方法を示しています。しかし、地理定位は特定の位置の情報にも非常に役立ちます。
例：
- ローカル情報の更新
- ユーザーの周辺の興味深いポイントを表示
- インタラクティブな車載ナビゲーションシステム (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>
- 前のページ HTML5 追移
- 次のページ HTML5 ドラッグ＆ドロップ
