Geolocation API

Geolocation API クイック・スタート

位置情報を取り出す

　Geolocation APIは、位置情報を取り出すだけなら、非常に簡単なコードで実現することができます。

HTML source


<dl>
	<dt>緯度</dt>
	<dd id="resultLatitude">-</dd>

	<dt>経度</dt>
	<dd id="resultLongitude">-</dd>
</dl>

　HTMLには、Geolocation APIで取得された位置情報を表示するための要素がマークアップされています。

JavaScript source


// 現在位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback);

// 位置情報取得完了時の処理
function successCallback(position) {
	// 緯度
	var glLatitude = position.coords.latitude;
	document.getElementById("resultLatitude").innerHTML = glLatitude;
	// 経度
	var glLongitude = position.coords.longitude;
	document.getElementById("resultLongitude").innerHTML = glLongitude;
}

＞＞ サンプルページを表示する

サンプルページの画像

＞＞ サンプルページを表示する

　このスクリプトのポイントは、navigator.geolocation.getCurrentPosition() メソッドです。このメソッドには、位置情報が取得できたときに実行するコールバック関数のオブジェクトを引数に与えます。Geolocation API では、瞬間的に位置情報を取得できるわけではありません。非同期に位置情報の取得処理が行なわれます。そのため、このように、コールバック関数を引数として指定するのです。

　このサンプルでは、位置情報が取得できると、successCallback() 関数が呼び出されます。この関数の第一引数には、位置情報が取得できたときのイベントに対応したイベント・オブジェクトが与えられます。

successCallback() 関数


function successCallback(position) {
	var glLatitude = position.coords.latitude;
	：
	：
}

　このイベント・オブジェクト position に規定された coords プロパティを使って、位置情報を取り出します。この position.coords には様々なプロパティが規定されていますが、これらに実際の位置情報を表す値が格納されています。

【Next】現在位置を取得する