サイキック位置情報取得!ムムムッ!ここにいます!
この機能はSSL対応していない場所では動きませんが
本サイトはSSL対応しましたのでご利用いただけます( ˘ω˘)
たまにスマホなんかで遊んでたら、「位置情報を送信しますがよろしいですか?」とか出る時があります。
あれを実際にやってみましょう。簡単ですよ
Geolocation API
Geolocation API これでデータを取得します。
API!?どこの馬の骨が作ったか分からんもんなんか使えるか!って知らない人はいいますが
W3Cが仕様策定を進めているAPIです。何一つ問題はありません。
対応ブラウザは?
FireFoxやChromeは最新版を使うのが前提として
IEは9以降 Safariは5以降で使えるとのこと
まぁ、PCで位置情報って・・・みたいな感じで主にスマホだと思うので対応ブラウザに関してはそこまで深く考えなくていいんじゃないの
とか思ってます。とはいえ、世の中には色々あるので、最低限対応してたら使うくらいの処理は記述しましょう。
使用判定について
対応しているか否かに関しては非常に簡単です。
メソッドがあるのかないのかを判定すればいいのです。
if (navigator.geolocation) { //Geolocation APIを利用できる時 }
getCurrentPosition
では早速位置情報の取得をやってみようと思います。
見出しの通り、getCurrentPositionメソッドを利用します。
googleMapも合わせて使ったほうがよりわかりやすいですかね。
引数
引数は3つ。以下の通り
引数名 | 引数詳細 |
---|---|
successFunc |
必須引数です。 位置情報取得が成功した時に実行される関数をここで指定します。 |
errorFunc | 位置情報取得が失敗した時に実行される関数をここで指定します。 |
option |
位置情報取得を行うにあたり、設定できるオプションを指定します。 指定方法はオブジェクト形式で指定してください。 |
オプションについて
オプション名 | オプション詳細 |
---|---|
enableHighAccuracy |
bool型で指定します。 true:精度の高い情報を取得する false:そこまで精度の高くない情報を取得する(デフォルト) |
timeout |
取得タイムアウトまでの時間をミリ秒で指定します。 デフォルトは制限なく試みます。 |
maximumAge |
前回取得した位置情報を保管することができ、その保管秒数をここで指定します。 単位はいつも通りミリ秒、また Infinity とすることで、無制限に保存するように設定できます。 デフォルトは0つまり、前回位置情報は保存しません。 |
戻り値
成功時および失敗時に関して各コールバックに値が渡されます。
まずは取得成功時の戻り値について
coordsプロパティに各種データが格納されています。
引数名 | 引数詳細 |
---|---|
latitude |
緯度データです。 値の範囲は 180~-180 単位は度 となります。 |
longitude |
経度データです。 値の範囲は 180~-180 単位は度 となります。 |
altitude |
高度データです。 値の範囲はまぁ、それぞれで、単位はmです。 |
accuracy |
緯度経度の誤差を取得します。 単位はm使い所は難しいっすね。 |
altitudeAccuracy |
高度の誤差を取得します。 単位はmこれも使い所は難しいっすね。 |
heading |
方位(方角)を取得します。 値の範囲は0~360 単位は度 ちなみに、0が北で、時計回りに 90:東 180:南 270:西 となります。 「方位、ヒトハチマル」って言われたら南にいきましょうね。 |
speed |
速度を取得します。 単位は m/秒となります。 |
取得失敗時の戻り値について
codeプロパティとmessageプロパティでデータが返ってきます。
messageに関しては使う必要はほぼないと思ってますので省略します。
エラーコード | エラー詳細 |
---|---|
1 |
位置情報取得が許可されなかった場合 ユーザーが許可しない場合などはこのエラーが出る |
2 | デバイスの位置判定が出来ない場合 |
3 |
タイムアウト オプションで設定したタイムアウトの時間を過ぎた場合 |
では位置情報を取得してみますか
ひとまずは取得できたんじゃないでしょうか。
こんな感じで結構簡単にとれるもんですね。
watchPosition
基本的な取得方法は上記getCurrentPositionで行いました。
継続的に取得したい場合は、このメソッドを利用するとらくちんです。
このメソッドは一定間隔でデータを取得し続ける特性があります。
ですが、今のところその間隔を指定できそうにもないので、若干使いにくいかもって感じです
紹介だけでデモは作りません。恐らくsetIntervalとかで細かく調整してgetCurrentPositionを呼び出すほうが良さそうですね
引数に関してはgetCurrentPositionとまったく同じ。
違う所はclearWatch用にidを返す所だけです。
ちなみにclearWatchは引数にidを指定して、watchPositionを止めるメソッドになります。
どんな所で使えそう?
例えば店舗検索で出たマップに対して今自分がどこにいるか?を出すと便利なのかなぁとか
スマホを使って鬼ごっこもできそうですね。
スマホはほとんどが対応しているっぽいですし積極的に使っていってもいいのではないでしょうか。