位置情報API
ユーザーの位置を特定する
HTML Geolocation API は、ユーザーの地理的な位置を取得するために使用されます。
これによりプライバシーが侵害される可能性があるため、ユーザーが承認しない限り、その位置は使用できません。
試してみてください
ノート
位置情報は、スマートフォンなどのGPSを備えたデバイスで最も正確です。
ブラウザのサポート
Geolocation APIはすべてのブラウザーでサポートされています。
| Yes | Yes | Yes | Yes | Yes |
ノート
Geolocation APIは、HTTPSなどの安全なコンテキストでのみ機能します。サイトが安全でないオリジン(HTTPなど)でホストされている場合、ユーザーの場所を取得するためのリクエストは機能しなくなります。位置情報APIの使用
このgetCurrentPosition()メソッドは、ユーザーの位置を返すために使用されます。
以下の例は、ユーザーの位置の緯度と経度を返します。
例
例の説明:
- Geolocationがサポートされているかどうかを確認する
- サポートされている場合は、getCurrentPosition() メソッドを実行します。そうでない場合は、ユーザーにメッセージを表示します
- getCurrentPosition()メソッドが成功すると、パラメーター(showPosition)で指定された関数に座標オブジェクトを返します。
- showPosition()関数は緯度と経度を出力します
上記の例は非常に基本的な位置情報スクリプトで、エラー処理はありません。
エラーと拒否の処理
メソッドの2番目のパラメーターは、getCurrentPosition()エラーを処理するために使用されます。ユーザーの位置情報の取得に失敗した場合に実行する関数を指定します。
例
結果をマップに表示する
結果を地図で表示するには、Googleマップなどの地図サービスにアクセスする必要があります。
以下の例では、返された緯度と経度を使用して、Googleマップで場所を表示しています(静止画像を使用)。
例
場所固有の情報
このページでは、ユーザーの位置を地図上に表示する方法を示しました。
地理位置情報は、次のような場所固有の情報にも非常に役立ちます。
- 現地の最新情報
- ユーザーの近くに関心のあるポイントを表示する
- ターンバイターン方式のナビゲーション(GPS)
getCurrentPosition()メソッド - データを返す
このgetCurrentPosition()メソッドは成功するとオブジェクトを返します。緯度、経度、および精度のプロパティは常に返されます。利用可能な場合、他のプロパティが返されます。
| Property | Returns |
|---|---|
| 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デバイス(スマートフォンなど)が必要です。
例
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。