js　geolocation API

Geolocation API

ユーザーの位置情報補を扱うためのAPI

無線LAN、WiFi、携帯電話基地局、GPS、IPアドレス等から位置情報を取得。
よって、ユーザーの接続環境次第で取得できる位置情報の精度、取得にかかる時間が異なる。
また、位置情報をどのソースから取得したかに関して知る手段がない。

Geolocation APIは位置情報をリクエストすれば必ず取得できるわけではなく、ユーザーの許可が必要。
ユーザーはブラウザの確認ウィンドウで許可をするか選択する。

Geolocationオブジェクト

navigatorオブジェクトから取得

PositionCallback

測位成功時に呼ばれるコールバック関数。取得した位置情報を参照できる。

PositionErrorCallback

エラー時に呼ばれるコールバック関数。エラー情報を参照できる。

測位に成功した場合、PositionCallbackにPositionオブジェクトが渡される。

取得できた位置情報は、Positionオブジェクトが持つCoodinatesオブジェクトの下記のプロパティから参照できる。

測地系はWGS84のみサポート。
位置情報は条件によりキャッシュされた情報が返される場合がある。これはタイムスタンプで判断できる。

測位に失敗した場合、PositionErrorCallbackにPositinErrorオブジェクトが渡される。

1. geolocationオブジェクトのgetCurrentPosition()メソッドで現在位置取得
2. PositionCallbackのコールバック関数内で地図と位置情報を取得

<div>緯度：<span id="latitude"></span></div>
<div>経度：<span id="lngitude"></span></div>
<div>高度：<span id="altitude"></span></div>
<div>緯度経度の精度：<span id="accuracy"></span></div>
<div>高度の精度：<span id="altitudeAccuracy"></span></div>
<div>方角：<span id="heading"></span></div>
<div>速度：<span id="speed"></span></div>
<div>時刻：<span id="timestamp"></span></div>
<style>#map_canvas{width:400px;height:300px;}</style>
<div id="map_canvas" width="400" height="300"></div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=ここにapiキー"></script>

// 画面表示の処理
window.addEventListener('DOMContentLoaded', function() {
	getCurrentPos();
});

// 現在位置取得
function getCurrentPos() {
	navigator.geolocation.getCurrentPosition(
		okCallback,
		ngCallback,
		{
			enableHighAccuracy: true,
			maximumAge: 0,
			timeout: 1000
		}
	);
}

// 取得成功時のコールバック関数
function okCallback(pos) {
	// 緯度取得
	var currentLatitude = pos.coords.latitude;
	console.log(pos);
	// 経度取得
	var currentLongitude = pos.coords.longitude;

	// 高度取得
	var currentAltitude = pos.coords.altitude;
	// 緯度経度の精度取得
	var currentAccuracy = pos.coords.accuracy;
	//高度の精度 取得
	var currentAltitudeAccuracy = pos.coords.altitudeAccuracy;
	// 方角取得
	var currentHeading = pos.coords.heading;
	// 速度取得
	var currentSpeed = pos.coords.speed;
	// 時刻
	var currentTimestamp = pos.timestamp;

	// マップに表示
	showGeolocationMap(currentLatitude, currentLongitude, currentAltitude, currentAccuracy, currentAltitudeAccuracy, currentHeading, currentSpeed, currentTimestamp);
}

// 現在位置をマップに表示
function showGeolocationMap(latitude, longitude, currentAltitude, currentAccuracy, currentAltitudeAccuracy, currentHeading, currentSpeed, currentTimestamp) {
	// 緯度経度の値出力
	document.getElementById('latitude').innerHTML = latitude;
	document.getElementById('lngitude').innerHTML = longitude;

	// Coodinatesオブジェクトの他のプロパティ値出力
	document.getElementById('altitude').innerHTML = currentAltitude;
	document.getElementById('accuracy').innerHTML = currentAccuracy;
	document.getElementById('altitudeAccuracy').innerHTML = currentAltitudeAccuracy;
	document.getElementById('heading').innerHTML = currentHeading;
	document.getElementById('speed').innerHTML = currentSpeed;
	document.getElementById('timestamp').innerHTML = currentTimestamp;

	// google mapに表示
	var myPos = new google.maps.LatLng(latitude, longitude);
	var myOptions = {
		zoom: 14,
		center: myPos,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

	// marker
	var marker = new google.maps.Marker({
		position: myPos,
	});
	marker.setMap(map);
}

// 失敗時のコールバック関数
function ngCallback(er) {
	// TODO: エラー時処理
	console.log(er.message);
}