“Geolocation” – Alphabetical Advent Calendar 2013
この記事は賞味期限切れです。（更新から1年が経過しています）
“G” は Geolocation の “G”。
Geolocation
Geolocation は、ユーザーの現在位置を調べる為のオブジェクトです。 今では珍しくなくなってきた現在位置を利用したアプリケーションやゲームなどに利用する事ができます。 使用は非常に簡単で、navigator に生えている geolocation を参照するだけです。 navigator を調べればサポートしているかどうかがすぐ調べられますね。
var supportGeolocation = "geolocation" in navigator;
勿論位置情報がダダ漏れなのは色々と問題がある為、geolocation の機能を使用しようとすると
「example.com に位置情報の共有を許可しますか？」
のようなダイアログが出るようになっています。 許可しなかった場合は位置情報を取得する事ができません。
位置情報の取得は getCurrentPosition() を使って行います。 引数には、返された geoposition オブジェクトを受け取る為のコールバック関数を渡します。 コールバックには位置情報を格納した geoposition オブジェクトが渡されます。 geoposition.coords に緯度経度等の情報が入っているのでそれを参照して使用しましょう。
navigator.geolocation.getCurrentPosition(function(pos){
pos.coords.latitude; // 緯度
pos.coords.longitude; // 経度
});
また、getCurrentPosition には第二引数としてエラー時のコールバック関数、第三引数としてオプションが渡せます。 オプションには enableHighAccuracy 、timeout、 maximumAge が使え、 timeout の時間内に位置情報が取得できなかった場合は「失敗」とされ、エラー時のコールバックが呼ばれます。
navigator.geolocation.getCurrentPosition(
function(){ /* 成功時の処理 */ },
function(){ /* 失敗時の処理 */ },
{
enableHighAccuracy: true, // より精度の高い位置情報を得るかどうか
timeout: 5000, // 位置情報を取得するまでのタイムアウト
maximumAge: 0 // 位置情報のキャッシュの寿命
}
);
ジオコーディングを利用する
ジオコーディング というのは、例えば住所等を入力すると座標（緯度経度）等の情報を教えてくれる仕組みの事を指し、 その逆、つまり緯度経度から国や住所などを割り出す事を 逆ジオコーディング と言ったりします。 Google Map API ではジオコーディング・逆ジオコーディング共サポートしているので、 それを利用して座標から現在地の情報を引いてみましょう。
Google Map APIを利用開始する手順についてはここでは省きます。 手順を踏んでAPIキーを取得した上でJavaScriptを読み込む事で google.maps.Geocoder が使用出来るようになります。
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
逆ジオコーディングする為には、 Geocoder.geocode() メソッドに緯度経度の情報を渡せばOKです。 緯度経度の渡し方ですが、そのまま渡すのではなく、一度 LatLng オブジェクトにする必要があるので注意しましょう。
var geocoder = new google.maps.Geocoder();
navigator.geolocation.getCurrentPosition(function(pos){
// 座標から LatLng オブジェクトを生成して渡す
var latlng = new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
);
geocoder.geocode({"latLng": latlng}, function(results, status){
if(results.length){
var result = resulsts.shift();
console.log(result.formatted_address); // "日本, 神奈川県横浜市XXXXXXXXXX" など
}
});
});
geoode() の使い方はご覧のとおりです。コールバックの第一引数には、結果のオブジェクトが精度の高い順に配列に格納されて渡されます。 formatted_addoress は文字通りフォーマットされた文字列が格納されています。 結果オブジェクトにはこの他にも住所を細かく部品に分けた address_components などが含まれているので、 国などを取得したい場合はこれが使えそうです。
result.address_components.forEach(function(component){
if(component.types.indexOf("country") >= 0){
console.log("あなたはいま", component.long_name, "にいるみたいです。");
}
});
コメント