HTML Geolocation API
HTML Geolocation APIは、ユーザーの位置を特定するために使用されます。
ユーザーの位置を特定する
HTML Geolocation APIは、ユーザーの地理的位置を取得するために使用されます。
これはプライバシーを危険にさらす可能性があるため、ユーザーが承認しない限り、そのポジションは利用できません。
注： ジオロケーションは、スマートフォンなどのGPSを備えたデバイスで最も正確です。
ブラウザのサポート
表の数字は、Geolocationを完全にサポートする最初のブラウザバージョンを示しています。
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
注： Chrome 50以降、GeolocationAPIはHTTPSなどの安全なコンテキストでのみ機能します。サイトが安全でないオリジン（HTTPなど）でホストされている場合、ユーザーの場所を取得するリクエストは機能しなくなります。
HTMLジオロケーションの使用
このgetCurrentPosition()メソッドは、ユーザーの位置を返すために使用されます。
次の例は、ユーザーの位置の緯度と経度を返します。
例
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
説明された例：
- ジオロケーションがサポートされているかどうかを確認する
- サポートされている場合は、getCurrentPosition（）メソッドを実行します。そうでない場合は、ユーザーにメッセージを表示します
- getCurrentPosition（）メソッドが成功すると、パラメーター（showPosition）で指定された関数に座標オブジェクトが返されます。
- showPosition（）関数は、緯度と経度を出力します
上記の例は、エラー処理のない非常に基本的なジオロケーションスクリプトです。
エラーと拒否の処理
メソッドの2番目のパラメーターは、getCurrentPosition()エラーを処理するために使用されます。ユーザーの場所の取得に失敗した場合に実行する関数を指定します。
例
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;
}
}
場所固有の情報
このページでは、ユーザーの位置を地図上に表示する方法を示しました。
ジオロケーションは、次のような場所固有の情報にも非常に役立ちます。
- 最新の地域情報
- ユーザーの近くに関心のあるポイントを表示する
- ターンバイターン方式のナビゲーション（GPS）
getCurrentPosition（）メソッド-データを返す
このgetCurrentPosition()メソッドは、成功するとオブジェクトを返します。緯度、経度、精度のプロパティは常に返されます。利用可能な場合、他のプロパティが返されます。
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
ジオロケーションオブジェクト-その他の興味深い方法
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 = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>