html5

【HTML5】Geolocation APIを使用して位置情報を受け取る方法



HTML5を利用して緯度・経度等の位置情報を受け取ることが出来るようになりました。
これによってWebページで位置情報を取得して様々なことに使えます。

サンプル

※ブラウザの位置情報送信の許可をしてください。

サンプルコード

<script>
function getPosition(){
	// Geolocation API使用可否判定
	if (navigator.geolocation) {
		// Geolocation APIを利用可能
		// 現在の位置情報を取得
		navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
	} else {
		// Geolocation APIを利用不可
		document.getElementById("show_result").innerHTML = "この端末では使用できません";
	}
}

// 取得成功時にユーザ情報を返す
function successCallback(position) {
	var gl_text = "緯度:" + position.coords.latitude + "<br>";
		gl_text += "経度:" + position.coords.longitude + "<br>";
		gl_text += "高度:" + position.coords.altitude + "<br>";
		gl_text += "緯度・経度の誤差:" + position.coords.accuracy + "<br>";
		gl_text += "高度の誤差:" + position.coords.altitudeAccuracy + "<br>";
		gl_text += "方角:" + position.coords.heading + "<br>";
		gl_text += "速度:" + position.coords.speed + "<br>";
	document.getElementById("show_result").innerHTML = gl_text;
}

// 取得失敗時
function errorCallback(error) {
	var err_msg = "";
	switch(error.code)
	{
		case 1:
			err_msg = "位置情報の利用が許可されていません";
			break;
		case 2:
			err_msg = "デバイスの位置が判定できません";
			break;
		case 3:
			err_msg = "タイムアウトしました";
			break;
	}
	document.getElementById("show_result").innerHTML = err_msg;
}
</script>
<button type="button" onclick="getPosition()">現在地取得</button>
<div id="show_result"></div>

解説

Geolocation API使用可能判定

Geolocation APIを使う場合は対応してないブラウザもあるので使用可否の判定が必要です。
if (navigator.geolocation) {
	// 使用可能
}else{
	// 使用不可	
}

Geolocation API 位置情報の取得メソッド

// 第2、3引数は省略可能です。
navigator.geolocation.getCurrentPosition(成功時, 失敗時, オプション)
メソッド機能
getCurrentPosition()現在の位置情報を取得
watchPosition()位置情報を定期的に監視
clearWatch()watchPosition()による位置情報の監視をクリア

第3引数のオプション
オプション意味
enableHighAccuracy精度の高い位置情報を取得する(true, false)
timeoutタイムアウトまでの時間(単位:ミリ秒)
maximumAge位置情報の有効期限(単位:ミリ秒)
// 精度を高く,タイムアウト:10秒, 位置情報の有効期限:5分
navigator.geolocation.getCurrentPosition(成功時, 失敗時, {enableHighAccuracy:true; timeout:10000; maximumAge:300000;})

位置情報取得成功時の値取得方法

成功時はPositionオブジェクトが返されオブジェクトのcoords属性から値を取得する。
属性名値の内容値の単位
latitude緯度(-180~180)
longitude経度(-90~90)
altitude高度m
accuracy緯度・経度の誤差m
altitudeAccuracy高度の誤差m
heading方角(0~360)
speed速度m/秒

※具体的な使い方はサンプルコードの行15~24を参照

位置情報取得成功時の値取得方法

位置情報取得失敗時はerrorが返されます。
位置情報の取得時のエラーコードは、code属性で取得することができます。
エラーコードキーワードエラー内容
1PERMISSION_DENIED位置情報の利用が許可されていない(位置情報の利用を許可しなかった場合など)
2POSITION_UNAVAILABLEデバイスの位置が判定できない
3TIMEOUTタイムアウト(timeout属性で指定された時間内にPositionオブジェクトを取得できなかった場合)

※具体的な使い方はサンプルコードの行27~42を参照

大体Geolocation APIの基本的な使い方です。
Google Mapなどと組み合わせて使えば様々な事が出来るはず、色んなことに使えそうですね。

コメントを残す