Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Geolocation API

Geolocation API

howdy39

May 25, 2018
Tweet

More Decks by howdy39

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. その1 地図
    ● Google Maps
    ● Yahoo!地図
    ● Bing Maps
    ● etc

    View full-size slide

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

    View full-size slide

  5. Geolocation API で取れる情報

    View full-size slide

  6. 取れる情報
    ● 緯度
    ● 経度
    ● 緯度/経度の精度
    ● 高度
    ● 高度の精度
    ● 方位
    ● 速度

    View full-size slide

  7. Geolocation API の使い方

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. navigator.geolocation.getCurrentPosition(
    success, error, options
    );
    失敗時の処理

    View full-size slide

  12. error Function
    PositionError オブジェクトにエラーコードが入っている
    function (error) {
    const errorCode = error.code;
    }
    エラーコードは次の3つのどれか
    1: 位置情報の利用が許可されていない
    2: 位置が特定できない
    3: タイムアウト

    View full-size slide

  13. navigator.geolocation.getCurrentPosition(
    success, error, options
    );
    オプション

    View full-size slide

  14. geoOptions Object
    オプションは3つだけ
    const options = {
    enableHighAccuracy: false, // 高精度の有効化
    timeout: 5 * 1000, // タイムアウト(ms)
    maximumAge: 10 * 1000 // 位置情報の有効期限(ms)
    };

    View full-size slide

  15. デモ
    https://howdy39.github.io/study-device-api/geolocation/

    View full-size slide

  16. Google Maps JavaScript API
    Google マップを使うAPI
    使うには Cloud Console で API KEY を作ってJS読み込み時に
    設定する
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFbYxhyD8zKleiXY8
    O7wxuRZvUGtJTldk&v=3.exp&sensor=false">

    View full-size slide

  17. デモ
    https://howdy39.github.io/study-device-api/geolocation/map.ht
    ml

    View full-size slide

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

    View full-size slide