参照元 https://web-designer.cman.jp/javascript_ref/others/gps/
JavaScriptで位置情報の取得が可能です。ただし、正しい位置とならないこともあります。
GPSを搭載したスマートフォンやノートパソコンでGPS機能が利用可能となっている場合は、ほぼ正しい位置を取得できます。その他の場合は、携帯キャリアのアクセスポイント(基地局)となったりIPアドレスを管理しているプロバイダの位置となったりします。
実際に「東京都世田谷区」の光回線を使用したパソコン(GSPなし)で位置情報を取得したところ、「東京都千代田区」と表示されました。
GPSを利用した場合は位置も正しくなりますが、正しい位置を取得できない場合も多くありますので、利用には注意が必要です。
位置取得のAPI
位置情報取得には以下の関数(API)があります。
単発 | getCurrentPosition | 現在の位置情報を1回取得 |
---|---|---|
連続 | watchPosition | 現在の位置情報を繰返し取得(位置の移動監視) |
clearWatch | 上記「watchPosition」の中止(停止) |
取得できるには以下の値となります。
属性 | 取得内容 | 単位 |
---|---|---|
latitude | 緯度(-180~180) | 度 |
longitude | 経度(-90~90) | 度 |
altitude | 高度 | メートル |
accuracy | 緯度・経度の誤差 | メートル |
altitudeAccuracy | 高度の誤差 | メートル |
heading | 方角(0~360)0:北 | 度 |
speed | 速度 | メートル/秒 |
GPSなしのパソコンなどでも位置情報は取得できますが、位置が大きくずれる場合があります。 また、使用しているブラウザによっても位置が異なる場合があります。 |
JavaScriptサンプル
以下のサンプルを実行すると、サンプルを実行したJavaScriptが表示されます。
サンプル実行された位置情報は保管しておりませんのでご安心ください。
スマホの場合は、このQRコードで当ページが開きます。
現在の位置情報を1回取得
近くのお店情報や現在地の天気など、位置情報を1回取得すればいい場合は「getCurrentPosition」を使用します。
ただし「getCurrentPosition」は位置の確認精度が低いとの情報もあり、「watchPosition」を一定時間実行する方がより正確に近づく可能性もあります。(もともと正確な位置情報でない可能性が高いとお考えください)
以下のサンプルでご確認ください。位置情報を取得する確認メッセージが表示されます。「許可」を選択しないと位置情報は表示されません。このサンプル実行で取得される位置情報は一切保管しません。
現在の位置情報を繰返し取得(位置の移動監視)
歩きながら、車で移動中などスマホの位置を定期的に取得したい場合は「watchPosition」を使用します。(もともと正確な位置情報でない可能性が高いとお考えください)
以下のサンプルでご確認ください。位置情報を取得する確認メッセージが表示されます。「許可」を選択しないと位置情報は表示されません。このサンプル実行で取得される位置情報は一切保管しません。
デモ(サンプル)は一定回数で追跡が自動停止します。