Successfully reported this slideshow.

JavaScriptで位置情報を取得してみた

0

Share

Upcoming SlideShare
開発研修について.pdf
開発研修について.pdf
Loading in …3
×
1 of 9
1 of 9

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

JavaScriptで位置情報を取得してみた

  1. 1. 2019/07/05 JavaScriptで位置情報を 取得してみた 執筆者:トビウオ
  2. 2. 位置情報って? ✤ 緯度・経度・高度などといった情報のこと ✤ 取得するには適切なパーミッションが必要なことも ✤ なにげにJavaScriptからも取得できるらしい
  3. 3. 取得方法 ✤ getCurrentPosition関数に、 成功時・失敗時のコールバ ック関数と、実行オプショ ンを設定する ✤ 成功時は緯度・経度などの 情報が手に入る(後述) ✤ オプションにはタイムアウ ト時間などを設定する(後述) サンプルソース(MDNより引用)
  4. 4. 取得できる情報 ✤ success関数の第一引数に、Position型(インターフェース)で渡される プロパティ 意味 単位 coords.latitude 緯度(WGS84) 度数(北緯) coords.longitude 経度(WGS84) 度数(東経) coords.altitude 高度 m coords.accuracy 緯度/経度の精度 m coords.altitudeAccuracy 高度の精度 m coords.heading デバイスの移動方向 度数(北だと0°) coords.speed デバイスの速度 m/s
  5. 5. 取得できる情報(補足) ✤ データを取得できない場合、緯度・経度・位置の精度はNaN、それ以外 はnullが返ってくる ✤ デバイスの速度は水平成分におけるものである。また、速度が0である場 合、デバイスの移動方向はNaNを返す ✤ 緯度・経度・高度における「精度」は、「95%信頼区間であるべき」と 規格に書かれている ✤ デバイスの移動方向は、北→東→南→西で0°・90°・180°・270°とする
  6. 6. 取得時のオプション ✤ enableHighAccuracy……trueにすると、より精度の高い位置情報(大抵は GPS)を取得するようになる ✤ timeout……タイムアウト時間(ms単位)。0にするとエラー時にコールバッ クが返らないようになる ✤ maximumAge……返す位置情報はキャッシュされるが、その寿命を指定 する(ms単位)。0にすると毎回最新の情報を返させる
  7. 7. さあ早速試してみ…… ✤ ローカル環境だと、PCブラウザで実行したら取得さ れるがスマホで(PCに)アクセスすると取得されない! ✤ MDN「あっそれHTTPSでしか使えないんですよ」 ✤ HTTPSサーバーを立てないとテストできないorz
  8. 8. 取得サンプル スマホの例PCの例
  9. 9. 参考資料 ✤ Geolocation.getCurrentPosition() - Web API | MDN ✤ Position - Web API | MDN ✤ Coordinates - Web API | MDN ✤ Geolocation API Specification

×