@0tofuの備忘録...

プログラミングとか仕事の話とかFIT3 RS(GK5)のメンテナンス記録等の雑記

JavaScriptで位置情報を取得する[html5, geoLocation API]

iOSやAndroidのアプリで位置情報を利用するものは多々ありますが、
わざわざアプリを作成しなくても、JavaScriptで現在位置を取得できるのでそれの紹介を簡単にしたいと思います。

geoLocation APIとは

ユーザ(端末)の位置情報を簡単に扱う為のAPIです。
geoLocation APIが策定される以前は、各携帯キャリアごとに独自規格であった為、扱うのが難しい状況でしたが
W3Cにより、仕様が標準化されJavaScriptで簡単に位置情報が取得できるようになりました。

GPSによる位置情報を取得できるスマートフォンだけではなく、日常使用しているPCでもブラウザが対応していれば位置情報を取得できます。

Geolocation API Specification

 

サンプルデモ(※ 位置情報を許可してください。)

https://jsfiddle.net/0tofu/7o9hn288/

ソースコード

 

"navigator.geolocation"を使用できるか、できないかでgeoLocation APIの使用可否を判断します。

現在位置を取得する処理は"navigator.geolocation.getCurrentPosition"により取得します。

第一引数に処理成功時(現在位置が取得できた時)の関数を定義し
第二引数に処理失敗時の関数を定義します。
また、オプションとして第三引数に以下のオプションが指定可能です

・enableHighAccuracy:より精度の高い、位置情報を取得するかどうか
・timeout:位置情報取得する際のタイムアウト値を設定(ミリ秒)
・maximumAge:前回取得した位置情報をいつまでキャッシュするか(ミリ秒)

簡単なデモですが、次回は上記を使って、Google Mapに現在位置をアイコンで表示してみたいと思います。