Tweet
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

その１ 地図 ● Google Maps ● Yahoo!地図 ● Bing Maps ● etc

Slide 5

Slide 5 text

その２ 周辺情報を調べる 位置情報を求めてくるパターン ● 「天気」で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; } エラーコードは次の３つのどれか 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