中学受験専門 理科総合研究所 −理総研−
010：W3C Geolocation APIで位置情報を取得対象言語：HTML5 JavaScript / Google APIs
|
|
|
キーワード： HTML5 W3C Geolocation Google Maps AJAX Search API 位置 所在地 情報 緯度 経度 住所 GClientGeocoder 逆ジオコーディング |
|
|
Google Maps API V2を使用している以下の情報は古く、正式にV3に移行した現在では稼働しません。
W3Cが策定中のHTML5、そこで導入される予定のGeolocation APIを使用し、サイト訪問者の地図的な情報（緯度・経度）を取得します。そして取得した情報からGoogle Maps APIを用いて逆ジオコーディングを行い、訪問者の位置情報（住所など）の候補をリストアップ。Geolocationにブラウザが対応していない場合は、簡易的にGoogle AJAX Search APIで都道府県情報を取得。その流れを書いていきます。
理総研においてその目的は「訪問者の都道府県情報」・「可能な限りお金をかけず」なので、それ以外については割愛します。Geolocation APIにせよGoogle AJAX Search APIにせよどこかにあるデータベースと訪問者のIPを照合している点では同じであり、精度の高さが必要なのであれば民間（有料）のサービスを利用するしかないかも...と管理人も半ばあきらめ気味です。
そもそもGeolocation APIは端末ユーザーが自分の位置を知りたいときに使うものであり、訪問者すべてにAPI利用の選択を迫るようなサイト仕様は控えた方が良いとも思ってます。取得できる情報の精度について個人的に調査中なので、興味がありましたら画面右の「管理人プログラムテスト 2.0」に御協力下さい。
このテーマは理総研ブログ・我思う故にWareありの「位置情報取得の陣 その２」でも扱っております。
右の管理人プログラムテスト 3.0 はGoogle Maps API V3で稼働しております。 |
|
var addr_array = new Array(); //住所候補を格納する配列
if (navigator.geolocation) {//ブラウザがHTML5の仕様に対応しているかどうかチェック
//Geolocation APIで緯度・経度情報を取得
navigator.geolocation.getCurrentPosition(function(visitor){
var lat = visitor.coords.latitude; //緯度
var lng = visitor.coords.longitude; //経度
//
//Google Maps APIに緯度・経度情報を渡す
var geocoder = new GClientGeocoder();
var latlng = new GLatLng(lat,lng);
geocoder.getLocations(latlng, function(result) {
//結果を評価します。G_GEO_SUCCESSが返ってくるときは成功です。
if (result.Status.code == G_GEO_SUCCESS){
//
//.lengthで返された配列の要素数をカウント
for (i=0; i<result.Placemark.length; i++) {
var p = result.Placemark[i];
//ここからは、情報があれば配列addr_arrayに格納という回りくどい手を使っていきます。
//都道府県名
if (p.AddressDetails.Country.AdministrativeArea) {
addr_array[i] = p.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName;
//市区名
if (p.AddressDetails.Country.AdministrativeArea.Locality) {
addr_array[i] += "," + p.AddressDetails.Country.AdministrativeArea.Locality.LocalityName
//町村名
if (p.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality) {
addr_array[i] += "," + p.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.DependentLocalityName;
//番地情報
if (p.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.Thoroughfare) {
addr_array[i] += "," + p.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.Thoroughfare.ThoroughfareName;
}
}
}
}
} // for end
//
} else {
//1：G_GEO_SUCCESSが返されないときの処理。
〜
}
});
},
//navigator.geolocation.getCurrentPositionの第２引数。
function(e){
//2：HTML5対応ブラウザでも、訪問者に位置情報の取扱いを拒否されたときの処理。
〜
});
} else {
//3：HTML5未対応ブラウザでの処理。
〜
}
function getAddressFromClientLocation() {
//Google AJAX Search API
var c = google.loader.ClientLocation;
if(c != null){
addr_array[0] = c.address.region;
}
}
|
