js geolocation API

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

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

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

Geolocationオブジェクト
navigatorオブジェクトから取得
Goelocationのメソッド
getCurrentPosition ユーザー位置情報を1回だけ取得。
引数にコールバック関数(PositionCallback, PositionErrorCallback)設定可。
watchPosition() ユーザー位置情報を定期的に監視。
引数にコールバック関数(PositionCallback, PositionErrorCallback)設定可。
clearWatch() watchPosition()による監視をクリア。
PositionCallback
測位成功時に呼ばれるコールバック関数。取得した位置情報を参照できる。
PositionErrorCallback
エラー時に呼ばれるコールバック関数。エラー情報を参照できる。

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

Positionのプロパティー
coords Coordinatesオブジェクトで位置情報を含む
timestamp 測位が成功した時刻

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

latitude 緯度
longitude 経度
altitude 高度
accuracy 緯度経度の精度
altitudeAccuracy 高度の精度
heading 方角
speed 速度

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

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

PositionErrorのプロパティー
code PERMISSION_DENIED, POSITION_UNABAILABEL, TIMEOUTのいずれか
message エラーの説明
  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);
}
PAGE TOP