Geolocation API

Geolocation API

5abf9d4714b77a15beea063d08586560?s=128

howdy39

May 25, 2018
Tweet

Transcript

  1. Geolocation API 2018/05/25 第7回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)

  2. Geolocation API ブラウザで位置情報を取得するAPI 基本的にどのブラウザでも使える https://caniuse.com/#feat=geolocation

  3. 用途

  4. その1 地図 • Google Maps • Yahoo!地図 • Bing Maps

    • etc
  5. その2 周辺情報を調べる 位置情報を求めてくるパターン • 「天気」でGoogle検索 • 「カフェ」でGoogle検索 • 「ATM」でGoogle検索 ※これらは周辺情報を調べようとしている(と判断)

  6. Geolocation API で取れる情報

  7. 取れる情報 • 緯度 • 経度 • 緯度/経度の精度 • 高度 •

    高度の精度 • 方位 • 速度
  8. Geolocation API の使い方

  9. 使い方 現在の位置情報を取得する navigator.geolocation.getCurrentPosition( success, error, option ); ※ getCurrentPositionをwatchPositionにすると定期的に取得

  10. navigator.geolocation.getCurrentPosition( success, error, options ); 成功時の処理

  11. success Function Position オブジェクトに位置情報が入っている function (position) { const latitude =

    position.coords.latitude; const longitude = position.coords.longitude; ... }
  12. navigator.geolocation.getCurrentPosition( success, error, options ); 失敗時の処理

  13. error Function PositionError オブジェクトにエラーコードが入っている function (error) { const errorCode =

    error.code; } エラーコードは次の3つのどれか 1: 位置情報の利用が許可されていない 2: 位置が特定できない 3: タイムアウト
  14. navigator.geolocation.getCurrentPosition( success, error, options ); オプション

  15. geoOptions Object オプションは3つだけ const options = { enableHighAccuracy: false, //

    高精度の有効化 timeout: 5 * 1000, // タイムアウト(ms) maximumAge: 10 * 1000 // 位置情報の有効期限(ms) };
  16. デモ https://howdy39.github.io/study-device-api/geolocation/

  17. Google Maps JavaScript API Google マップを使うAPI 使うには Cloud Console で

    API KEY を作ってJS読み込み時に 設定する <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFbYxhyD8zKleiXY8 O7wxuRZvUGtJTldk&v=3.exp&sensor=false"></script>
  18. デモ https://howdy39.github.io/study-device-api/geolocation/map.ht ml

  19. 参考 ユーザーの現在地 https://developers.google.com/web/fundamentals/native-hardware/user-location/ Geolocationの利用 https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation