HTML ジオロケーションAPI
HTML Geolocation APIは、ユーザーの位置を特定するために使用されます。
ユーザーの位置を特定する
HTML Geolocation APIは、ユーザーの地理的な位置を取得するために使用されます。
これによりプライバシーが侵害される可能性があるため、ユーザーが承認しない限り、その位置は使用できません。
注：位置情報は、スマートフォンなどのGPSを備えたデバイスで最も正確です。
ブラウザのサポート
表の数字は、Geolocationを完全にサポートする最初のブラウザバージョンを示しています。
| API | |||||
|---|---|---|---|---|---|
| 位置情報 | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
注：Chrome 50以降、Geolocation APIはHTTPSなどの安全なコンテキストでのみ機能します。サイトが安全でないオリジン(HTTPなど)でホストされている場合、ユーザーの場所を取得するリクエストは機能しなくなります。
HTML ジオロケーションの使用
getCurrentPosition()メソッドを使用して、ユーザーの位置を返します。
以下の例は、ユーザーの位置の緯度と経度を返します。
例
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "このブラウザでは地理位置情報がサポートされていません。";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
例の説明:
- Geolocationがサポートされているかどうかを確認する。
- サポートされている場合は、getCurrentPosition()メソッドを実行します。そうでない場合は、ユーザーにメッセージを表示します。
- getCurrentPosition()メソッドが成功すると、パラメーター(showPosition)で指定された関数に座標オブジェクトを返します。
- 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;
}
}
場所固有の情報
このページでは、ユーザーの位置を地図上に表示する方法を示しました。
地理位置情報は、次のような場所固有の情報にも非常に役立ちます。
- 現地の最新情報
- ユーザーの近くに関心のあるポイントを表示する
- ターンバイターン方式のナビゲーション(GPS)
getCurrentPosition()メソッド - 戻りデータ
getCurrentPosition()メソッドは、成功するとオブジェクトを返します。緯度、経度、精度のプロパティは常に返されます。他のプロパティが利用可能な場合は返されます。| プロパティ | 戻り値 |
|---|---|
| coords.latitude | 10進数としての緯度(常に返されます) |
| coords.longitude | 10進数としての経度(常に返されます) |
| coords.accuracy | 位置の精度(常に返されます) |
| coords.altitude | 平均海面からのメートル単位の高度(利用可能な場合は返されます) |
| coords.altitudeAccuracy | 位置の高度精度(利用可能な場合に返されます) |
| coords.heading | 北から時計回りの方位(利用可能な場合は返される) |
| coords.speed | 速度(メートル/秒)(可能な場合は返されます) |
| timestamp | 応答の日時(可能な場合に返されます) |
Geolocationオブジェクト - その他の興味深いメソッド
Geolocationオブジェクトには他にも興味深いメソッドがあります。
watchPosition()- ユーザーの現在位置を返し、ユーザーが移動すると更新された位置を返し続けます(車のGPSのように)。clearWatch()-watchPosition()メソッドを停止します。
以下の例は、watchPosition()メソッドを示しています。これをテストするには、正確なGPSデバイス(スマートフォンなど)が必要です。
例
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "このブラウザでは地理位置情報がサポートされていません。";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。