サイキック位置情報取得！ムムムッ！ここにいます！

この機能はSSL対応していない場所では動きませんが
本サイトはSSL対応しましたのでご利用いただけます( ˘ω˘)

たまにスマホなんかで遊んでたら、「位置情報を送信しますがよろしいですか？」とか出る時があります。
あれを実際にやってみましょう。簡単ですよ

Geolocation API

Geolocation API これでデータを取得します。
API！？どこの馬の骨が作ったか分からんもんなんか使えるか！って知らない人はいいますが
W3Cが仕様策定を進めているAPIです。何一つ問題はありません。

対応ブラウザは？

FireFoxやChromeは最新版を使うのが前提として
IEは9以降 Safariは5以降で使えるとのこと
まぁ、PCで位置情報って・・・みたいな感じで主にスマホだと思うので対応ブラウザに関してはそこまで深く考えなくていいんじゃないの
とか思ってます。とはいえ、世の中には色々あるので、最低限対応してたら使うくらいの処理は記述しましょう。

使用判定について

対応しているか否かに関しては非常に簡単です。
メソッドがあるのかないのかを判定すればいいのです。

if (navigator.geolocation) {
  //Geolocation APIを利用できる時
}

getCurrentPosition

では早速位置情報の取得をやってみようと思います。
見出しの通り、getCurrentPositionメソッドを利用します。
googleMapも合わせて使ったほうがよりわかりやすいですかね。

引数

引数は３つ。以下の通り

引数名	引数詳細
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を止めるメソッドになります。

どんな所で使えそう？

例えば店舗検索で出たマップに対して今自分がどこにいるか？を出すと便利なのかなぁとか
スマホを使って鬼ごっこもできそうですね。
スマホはほとんどが対応しているっぽいですし積極的に使っていってもいいのではないでしょうか。