Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Geolocation API
Search
howdy39
May 25, 2018
Programming
0
92
Geolocation API
howdy39
May 25, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
960
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
490
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
540
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.3k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.2k
Promise
howdy39
1
290
カラーユニバーサルデザイン / color universal design
howdy39
0
700
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
180
Media Queries
howdy39
0
77
Other Decks in Programming
See All in Programming
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
유연한 Composable 설계
l2hyunwoo
0
380
小さな開発会社を作った理由
polidog
0
1.9k
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Introduction to GitOps
hwchiu
0
110
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
【Go言語】golangci-lintの使い方
tomo1227
0
280
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
274
23k
Ruby is Unlike a Banana
tanoku
96
10k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
The Invisible Side of Design
smashingmag
294
50k
BBQ
matthewcrist
82
9k
What's new in Ruby 2.0
geeforr
338
31k
KATA
mclloyd
20
13k
Practical Orchestrator
shlominoach
185
10k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Transcript
Geolocation API 2018/05/25 第7回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)
Geolocation API ブラウザで位置情報を取得するAPI 基本的にどのブラウザでも使える https://caniuse.com/#feat=geolocation
用途
その1 地図 • Google Maps • Yahoo!地図 • Bing Maps
• etc
その2 周辺情報を調べる 位置情報を求めてくるパターン • 「天気」でGoogle検索 • 「カフェ」でGoogle検索 • 「ATM」でGoogle検索 ※これらは周辺情報を調べようとしている(と判断)
Geolocation API で取れる情報
取れる情報 • 緯度 • 経度 • 緯度/経度の精度 • 高度 •
高度の精度 • 方位 • 速度
Geolocation API の使い方
使い方 現在の位置情報を取得する navigator.geolocation.getCurrentPosition( success, error, option ); ※ getCurrentPositionをwatchPositionにすると定期的に取得
navigator.geolocation.getCurrentPosition( success, error, options ); 成功時の処理
success Function Position オブジェクトに位置情報が入っている function (position) { const latitude =
position.coords.latitude; const longitude = position.coords.longitude; ... }
navigator.geolocation.getCurrentPosition( success, error, options ); 失敗時の処理
error Function PositionError オブジェクトにエラーコードが入っている function (error) { const errorCode =
error.code; } エラーコードは次の3つのどれか 1: 位置情報の利用が許可されていない 2: 位置が特定できない 3: タイムアウト
navigator.geolocation.getCurrentPosition( success, error, options ); オプション
geoOptions Object オプションは3つだけ const options = { enableHighAccuracy: false, //
高精度の有効化 timeout: 5 * 1000, // タイムアウト(ms) maximumAge: 10 * 1000 // 位置情報の有効期限(ms) };
デモ https://howdy39.github.io/study-device-api/geolocation/
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>
デモ https://howdy39.github.io/study-device-api/geolocation/map.ht ml
参考 ユーザーの現在地 https://developers.google.com/web/fundamentals/native-hardware/user-location/ Geolocationの利用 https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation