理総研Webは、中学入試理科の暗記学習をA'n'Kingなどのデジタル教材でサポートする登録型eラーニングサイトです。
理総研
ログイン Name:
Pass:
理総研@中学受験専門:理科総合研究所
RSS
Front Page > Web Tech and Development Notes

左 理総研:技術情報と開発メモ 右

010:W3C Geolocation APIで位置情報を取得

対象言語:HTML5 JavaScript / Google APIs
キーワード:HTML5 W3C Geolocation Google Maps AJAX Search API 位置 所在地 情報 緯度 経度 住所 GClientGeocoder 逆ジオコーディング
Google Maps API V2を使用している以下の情報は古く、正式にV3に移行した現在では稼働しません。
右の管理人プログラムテスト 3.0 はGoogle Maps API 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ありの「位置情報取得の陣 その2」でも扱っております。
  • まずHTMLヘッダー内ででGoogle Maps APIとGoogle AJAX Search APIが利用できるように宣言しておいて下さい。この部分の詳細な説明は省略します。日本語を扱うことと、サイトに合わせた文字コード設定をお忘れ無く。

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;	//経度
  • ここまでがW3C Geolocation APIの利用です。次にGoogle Maps APIを用い、取得した緯度・経度情報から所在地情報(住所など)を割り出す逆ジオコーディングを行います。逆ジオコーディングでGoogleさんから返ってくるデータはJSON形式です。データの利用(PHPに渡したり)はJSON形式のままで良いのですが、その取扱い説明を端折りたい&それでいて再利用しやすい形式として、ココでは単純に位置情報候補をCSV形式で配列に放り込んでいきます。
//
		//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){

  • 既知の問題として、何故かデスクトップのSafariはG_GEO_SUCCESSを返してくれてもその先の処理が続行しません。理総研ではあらかじめブラウザ判定をし、望みをかけてGoogle AJAX Search APIに誘導しています。
  • 成功時に返される「Placemark」にはJSON形式で複数の位置情報・所在地候補が格納されています。配列数は一定でなく、また配列上位ほど精度が高いというワケではない事に注意して下さい。必要な情報(ここでは住所情報)だけを抜き取ります。
//
				//.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
  • G_GEO_SUCCESSが返される時に配列addr_arrayが空っぽという事は考えにくいので、エラー処理を以下の3ヶ所に施しておきます。ただしデスクトップのSafariではこのいずれにも属さない為、また別の処理が必要になります。
//
			} else {
				//1:G_GEO_SUCCESSが返されないときの処理。
				〜
			}
		});
	},

	//navigator.geolocation.getCurrentPositionの第2引数。
	function(e){
		//2:HTML5対応ブラウザでも、訪問者に位置情報の取扱いを拒否されたときの処理。
		〜
	});

} else {
	//3:HTML5未対応ブラウザでの処理。
	〜
}

  • 上記1〜3のエラー処理およびデスクトップのSafari用に、理総研では簡易的に以下の関数でGoogle AJAX Search APIを用いて都道府県名だけの取得を試みています。ただしその精度はあまり期待できません。
function getAddressFromClientLocation() {

	//Google AJAX Search API
	var c = google.loader.ClientLocation;

	if(c != null){

		addr_array[0] = c.address.region;

	}
}
著者 You Mizuguchi
PR
広告
  • 理総研内ショートカット
アンキング体験版へ
対新型コロナ エニグマへ
塾別合格者数のページへ
  • 理総研セレクト
Amazon
  • 投稿口コミ情報 (承認分)
> 金蘭千里中学校
> 同志社中学校
> 大阪産業大学附属中学校
> 大阪学芸中等教育学校
> 宇都宮海星女子学院中学校
> 洛南高等学校附属中学校
> 洛南高等学校附属中学校
> 洛南高等学校附属中学校
> 東大寺学園中学校
> 東大寺学園中学校
: 理科視点・中学校情報 :
  • ブログ投稿履歴
2020-04-19 / みんなのバグレポート
> エニグマの更新履歴と備忘録
2020-04-19 / 対新型コロナ・エニグマ
> エニグマを稼働させます。
2018-02-09 / 理総研内データ
> 塾別・合格者数のページの変更
2018-02-09 / 理総研内データ
> 2018年版 塾別・合格者数の集計方法
2014-11-02 / 説明会レポート
> 神大附属中等教育学校の適性検査を考察
:: ブログ記事一覧 ::
  • 現在のピクセルプラネット
Pixel Planet - piximage/rsk-1/2021-09-21.png
:: RSK-1の開拓史へ ::
  • 理総研について
中学入試理科の日々の暗記学習をA'n'King(アンキング)などのデジタル教材でサポートする、登録制無料コンテンツサイトです。
:: 詳しくはコチラ ::
理総研 :2011.02.03 設立
管理人 :水口 佑 / Cordu-Roy
お仕事 : フリープログラマー
:大手進学塾理科講師
:テレビドラゼミ講師


© 2011 System-iDO IT Devisers