Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Geolocation API 2018/05/25 第7回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)
Slide 2
Slide 2 text
Geolocation API ブラウザで位置情報を取得するAPI 基本的にどのブラウザでも使える https://caniuse.com/#feat=geolocation
Slide 3
Slide 3 text
用途
Slide 4
Slide 4 text
その1 地図 ● Google Maps ● Yahoo!地図 ● Bing Maps ● etc
Slide 5
Slide 5 text
その2 周辺情報を調べる 位置情報を求めてくるパターン ● 「天気」でGoogle検索 ● 「カフェ」でGoogle検索 ● 「ATM」でGoogle検索 ※これらは周辺情報を調べようとしている(と判断)
Slide 6
Slide 6 text
Geolocation API で取れる情報
Slide 7
Slide 7 text
取れる情報 ● 緯度 ● 経度 ● 緯度/経度の精度 ● 高度 ● 高度の精度 ● 方位 ● 速度
Slide 8
Slide 8 text
Geolocation API の使い方
Slide 9
Slide 9 text
使い方 現在の位置情報を取得する navigator.geolocation.getCurrentPosition( success, error, option ); ※ getCurrentPositionをwatchPositionにすると定期的に取得
Slide 10
Slide 10 text
navigator.geolocation.getCurrentPosition( success, error, options ); 成功時の処理
Slide 11
Slide 11 text
success Function Position オブジェクトに位置情報が入っている function (position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; ... }
Slide 12
Slide 12 text
navigator.geolocation.getCurrentPosition( success, error, options ); 失敗時の処理
Slide 13
Slide 13 text
error Function PositionError オブジェクトにエラーコードが入っている function (error) { const errorCode = error.code; } エラーコードは次の3つのどれか 1: 位置情報の利用が許可されていない 2: 位置が特定できない 3: タイムアウト
Slide 14
Slide 14 text
navigator.geolocation.getCurrentPosition( success, error, options ); オプション
Slide 15
Slide 15 text
geoOptions Object オプションは3つだけ const options = { enableHighAccuracy: false, // 高精度の有効化 timeout: 5 * 1000, // タイムアウト(ms) maximumAge: 10 * 1000 // 位置情報の有効期限(ms) };
Slide 16
Slide 16 text
デモ https://howdy39.github.io/study-device-api/geolocation/
Slide 17
Slide 17 text
Google Maps JavaScript API Google マップを使うAPI 使うには Cloud Console で API KEY を作ってJS読み込み時に 設定する
Slide 18
Slide 18 text
デモ https://howdy39.github.io/study-device-api/geolocation/map.ht ml
Slide 19
Slide 19 text
参考 ユーザーの現在地 https://developers.google.com/web/fundamentals/native-hardware/user-location/ Geolocationの利用 https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation