GeolocationAPI使ってみた
位置情報面白いですよね！
そんなわけで、GeolocationAPIを使ってみたのでまとめます。あまり難しいことを考えずに使う分にはすごい簡単でした。
GeolocationAPIとはなんぞや
まずGeolocationAPIて何ってことですが、specによると"各デバイスの実装により取得できる緯度経度のような位置情報を提供するインターフェースである"とありました。簡単に言ってしまうとjavascriptで"35.0000,135.0000"みたいな緯度経度の形式で現在地の情報を取得できるAPIのことです。
使ってみる
GeolocationAPIには
- getCurrentPosition(現在地を取得する)
- watchPosition(現在地を定期的に取得する)
- clearWatch(現在地を定期的に取得するのをやめる。watchPositionに対応しています)
の3つのAPIがあります。今回はgetCurrentPositionのみの使用だったので、getCurrentPositionについてまとめます。調べただけですが、他の2つのAPIもかなり簡単に使えるようでした。
getCurrentPositionは以下のような仕様になっています。
void getCurrentPosition(successCallback[, errorCallback[, options]]);
successCallbackには現在地を取得できたときのコールバックを、同様にerrorCallbackには現在地を取得できなかったときのコールバックを指定します。optionsにはAPI呼び出し時のoptionを指定します。optionsは下記のようなオブジェクトを渡して指定します。
var options = { timeout: 10000, maximumAge: 20000, enableHighAccuracy: true };
timeoutは現在地取得にかける時間(ミリ秒で指定)、maximumAgeはいつまでの位置情報のキャッシュを受け入れるかを指定します(ミリ秒で指定。0だとキャッシュの使用を許可しません)、enableHighAccuracyはアプリケーションに対して最も正確な位置情報を取得するように指定します(ただし、レスポンスが遅くなったりします)
あとは、GeolocationAPIを実装していないブラウザのために、
if (navigator.geolocation) { //GeolocationAPI使える！ } else { //GeolocationAPI使えない！ }
として機能テストしてあげます。
実際はこんな感じの実装になりました。
var options = { timeout: 10000, maximumAge: 20000, enableHighAccuracy: true }; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position){ var loc = position.coords.latitude + ',' + position.coords.longitude; alert(loc); }, function() { alert('位置情報の取得に失敗しました'); }, options); } else { alert('お使いのブラウザではこの機能はサポートされていません'); }
まとめ
かんたんですね！スマホ用のWebアプリで定期的に現在地を取得したりすると面白いことができそうです。
