JavaScript プログラミング講座

 

Geolocation クラスについて

 
 


■Geolocation クラスについて


Geolocation クラスを使用すると、ユーザーの位置情報を取得することができます。
 
高度や、経度緯度、方角などを取得することができます。
 

■ジオロケーションに対応しているか調べる


ブラウザがジオロケーション機能に対応しているか調べるには、navigator.geolocation プロパティを調べます。
 
結果が真であれば、利用可能です。
 
Internet Explorer 8 以前では利用できません
 
ジオロケーションが利用可能か調べる

// ジオロケーション機能をサポートしているか
if(navigator.geolocation){

	console.log("ジオロケーション機能をサポートしている");

}
 

■ジオロケーションオブジェクトを取得する


ジオロケーションオブジェクトを取得するには、navigator.geolocation プロパティを使用します。
 
ジオロケーションオブジェクトを取得する

// ジオロケーション機能をサポートしているか
if(navigator.geolocation){

	// ジオロケーションオブジェクトを取得
	var geo_location = navigator.geolocation;

	// 出力テスト
	console.log(geo_location);

}
 

■ユーザーの許可について


ジオロケーション機能を使用する場合、ユーザーの許可が必要です。
 
位置情報取得用のメソッドを実行すると、以下の様な確認のポップアップが表示されます。
 
■Internet Explorer 9
 
 
■Firefox 18
 
 
■Opera 12
 
 
■GoogleChrome 24
 
 
■Safari 5
 
 
 

 

位置情報を取得する

 
 


■位置情報を取得する


位置情報を取得するには、getCurrentPosition() メソッドを使用します。
 
Geolocation.getCurrentPosition(成功関数 , 失敗関数 , オプション) :Void
第01引数 Function位置情報の取得成功時に実行される、コールバック関数をセットする。
第02引数(略可)Function位置情報の取得失敗時に実行される、コールバック関数をセットする。
第03引数(略可)Objectオプション用のパラメータを、オブジェクト形式で渡す。
戻り値 Voidなし
 
■第01引数(位置情報の取得成功時に実行されるコールバック関数)
 
位置情報の取得成功時に、実行されるコールバック関数をセットします。
 
第01引数から、Position オブジェクトが得られます。
 
■第02引数(位置情報の取得失敗時に実行されるコールバック関数)
 
位置情報の取得失敗時に、実行されるコールバック関数をセットします。
 
第01引数から、PositionError オブジェクトが得られます。
 
■第03引数(オプション)
 
オブジェクトを1つ用意して、こちらで解説しているプロパティを設定します。
 
その後、第03引数にセットします。
 
■使用例
 
使用例です。
 
ジオロケーションから位置情報を取得する

// ジオロケーション機能をサポートしているか
if(navigator.geolocation){

	// ジオロケーションオブジェクトを取得
	var geo_location = navigator.geolocation;

	// 位置情報を取得
	geo_location.getCurrentPosition(function (position){

		// Coordinates オブジェクトを取得
		var coords = position.coords;

		// 出力テスト
		console.log("タイムスタンプ:" + position.timestamp  + " (" + new Date(position.timestamp) + ")");
		console.log("緯度:" + coords.latitude);
		console.log("経度:" + coords.longitude);
		console.log("座標(緯度と経度)の誤差の大きさ:" + coords.accuracy);
		console.log("高度:" + coords.altitude);
		console.log("高度の誤差の大きさ:" + coords.altitudeAccuracy);
		console.log("方角:" + coords.heading);
		console.log("速度:" + coords.speed);
	});
}
 
ジオロケーションから高精度な位置情報を取得する

// ジオロケーション機能をサポートしているか
if(navigator.geolocation){

	// ジオロケーションオブジェクトを取得
	var geo_location = navigator.geolocation;

	// ------------------------------------------------------------
	// 位置情報の取得成功時に実行される関数
	// ------------------------------------------------------------
	function GeolocationSuccessFunc(position){

		// Coordinates オブジェクトを取得
		var coords = position.coords;

		// 出力テスト
		console.log("タイムスタンプ:" + position.timestamp  + " (" + new Date(position.timestamp) + ")");
		console.log("緯度:" + coords.latitude);
		console.log("経度:" + coords.longitude);
		console.log("座標(緯度と経度)の誤差の大きさ:" + coords.accuracy);
		console.log("高度:" + coords.altitude);
		console.log("高度の誤差の大きさ:" + coords.altitudeAccuracy);
		console.log("方角:" + coords.heading);
		console.log("速度:" + coords.speed);
	}

	// ------------------------------------------------------------
	// 位置情報の取得失敗時に実行される関数
	// ------------------------------------------------------------
	function GeolocationFailureFunc(error){
		console.log("失敗:" + error.message + " (code:" + error.code + ")");
	}

	// ------------------------------------------------------------
	// オプション
	// ------------------------------------------------------------
	var position_options = {
		enableHighAccuracy:true,	// GPS などの高品質な情報を受け取リたいか
		timeout:1000,			// タイムアウトエラーとする時間を指定 (単位:ミリ秒)
		maximumAge:0			// 古い位置情報の取得を許容する場合、時間を指定 (単位:ミリ秒)
	};

	// ------------------------------------------------------------
	// 位置情報を取得
	// ------------------------------------------------------------
	geo_location.getCurrentPosition(GeolocationSuccessFunc,GeolocationFailureFunc,position_options);

}
 

■位置情報の更新を監視して取得する


位置情報の更新を監視して、位置情報を取得するには、watchPosition() メソッドを使用します。
 
監視を停止するには、clearWatch() メソッドを使用します。
 
Geolocation.watchPosition(成功関数 , 失敗関数 , オプション) :Number
第01引数 Function位置情報の取得成功時に実行される、コールバック関数をセットする。
第02引数(略可)Function位置情報の取得失敗時に実行される、コールバック関数をセットする。
第03引数(略可)Objectオプション用のパラメータを、オブジェクト形式で渡す。
戻り値 Numberハンドル値
 
■第01引数(位置情報の取得成功時に実行されるコールバック関数)
 
位置情報の取得成功時に、実行されるコールバック関数をセットします。
 
第01引数から、Position オブジェクトが得られます。
 
■第02引数(位置情報の取得失敗時に実行されるコールバック関数)
 
位置情報の取得失敗時に、実行されるコールバック関数をセットします。
 
第01引数から、PositionError オブジェクトが得られます。
 
■第03引数(オプション)
 
オブジェクトを1つ用意して、こちらで解説しているプロパティを設定します。
 
その後、第03引数にセットします。
 
■使用例
 
使用例です。
 
位置情報の更新を監視する

// ジオロケーション機能をサポートしているか
if(navigator.geolocation){

	// ジオロケーションオブジェクトを取得
	var geo_location = navigator.geolocation;

	// 位置情報の更新を監視する
	geo_location.watchPosition(function (position){

		// Coordinates オブジェクトを取得
		var coords = position.coords;

		// 出力テスト
		console.log("タイムスタンプ:" + position.timestamp  + " (" + new Date(position.timestamp) + ")");
		console.log("緯度:" + coords.latitude);
		console.log("経度:" + coords.longitude);
		console.log("座標(緯度と経度)の誤差の大きさ:" + coords.accuracy);
		console.log("高度:" + coords.altitude);
		console.log("高度の誤差の大きさ:" + coords.altitudeAccuracy);
		console.log("方角:" + coords.heading);
		console.log("速度:" + coords.speed);
	});
}
 
位置情報の更新を監視する(高精度)

// ジオロケーション機能をサポートしているか
if(navigator.geolocation){

	// ジオロケーションオブジェクトを取得
	var geo_location = navigator.geolocation;

	// ------------------------------------------------------------
	// 位置情報の取得成功時に実行される関数
	// ------------------------------------------------------------
	function GeolocationSuccessFunc(position){

		// Coordinates オブジェクトを取得
		var coords = position.coords;

		// 出力テスト
		console.log("タイムスタンプ:" + position.timestamp);
		console.log("緯度:" + coords.latitude);
		console.log("経度:" + coords.longitude);
		console.log("座標(緯度と経度)の誤差の大きさ:" + coords.accuracy);
		console.log("高度:" + coords.altitude);
		console.log("高度の誤差の大きさ:" + coords.altitudeAccuracy);
		console.log("方角:" + coords.heading);
		console.log("速度:" + coords.speed);
	}

	// ------------------------------------------------------------
	// 位置情報の取得失敗時に実行される関数
	// ------------------------------------------------------------
	function GeolocationFailureFunc(error){
		console.log("失敗:" + error.message + " (code:" + error.code + ")");
	}

	// ------------------------------------------------------------
	// オプション
	// ------------------------------------------------------------
	var position_options = {
		enableHighAccuracy:true,	// GPS などの高品質な情報を受け取リたいか
		timeout:1000,			// タイムアウトエラーとする時間を指定 (単位:ミリ秒)
		maximumAge:0			// 古い位置情報の取得を許容する場合、時間を指定 (単位:ミリ秒)
	};

	// ------------------------------------------------------------
	// 位置情報の更新を監視する
	// ------------------------------------------------------------
	geo_location.watchPosition(GeolocationSuccessFunc,GeolocationFailureFunc,position_options);

}
 

■ジオロケーションの監視を終了する


ジオロケーションの監視を終了するには、clearWatch() メソッドを使用します。
 
第01引数に、watchPosition() メソッドの戻り値から得られた番号を指定します。
 
Geolocation.clearWatch( ハンドル値 ) :Void
第01引数 NumberwatchPosition() メソッドの戻り値から得られた値をセット。
戻り値 Voidなし
 
ジオロケーションの監視を終了する

// ジオロケーション機能をサポートしているか
if(navigator.geolocation){

	// ジオロケーションオブジェクトを取得
	var geo_location = navigator.geolocation;

	// 位置情報の更新を監視する
	var watch_id = geo_location.watchPosition(function (){});

	// ジオロケーションの監視を終了する
	geo_location.clearWatch(watch_id);
}
 

■ Position オブジェクトについて

 
■ Position オブジェクトのプロパティ
 
Position オブジェクトには、以下のプロパティがあります。
 
プロパティ名説明
coordsObjectCoordinates オブジェクト
timestampNumberタイムスタンプ
 
■Coordinates オブジェクトのプロパティ
 
Coordinates オブジェクトには、以下のプロパティがあります。
 
情報が存在しない場合、null が格納されています。
 
プロパティ名説明
latitudeNumber緯度(単位:角度)
longitudeNumber経度(単位:角度)
accuracyNumber座標(緯度と経度)の精度レベル(大きいほど誤差がある)(単位:メートル)( 0 以上)
altitudeNumber高度(単位:メートル)
altitudeAccuracyNumber高度の精度レベル(大きいほど誤差がある)(単位:メートル)( 0 以上)
headingNumber方角(単位:角度、真北が 0度)
speedNumber速度(単位:秒速メートル m/s)
 

■ PositionError オブジェクトについて

 
■ PositionError オブジェクトのプロパティ
 
PositionError オブジェクトには、以下のプロパティがあります。
 
プロパティ名説明
codeNumberエラーコード
messageStringエラーの原因となるメッセージ(文字列)
 
■エラーコードについて
 
エラーコードには、以下の種類があります。
 
定数 番号説明
PERMISSION_DENIED 1ユーザーが位置情報へのアクセスを拒否した
POSITION_UNAVAILABLE 2位置情報の取得に失敗した(内部エラーなど)
TIMEOUT 3タイムアウトエラーが発生した
 

■ PositionOptions オブジェクトについて

 
■ PositionOptions オブジェクトのプロパティ
 
PositionOptions オブジェクトは、位置情報取得用の設定を、1つオブジェクトに格納して渡すための仕様です。
 
オブジェクトを1つ生成して、以下のプロパティをセットします。
 
プロパティ名説明
enableHighAccuracyBooleanGPS などの高品質な情報を受け取リたい場合に true を指定。(デフォルトは false)
timeoutNumberタイムアウトエラーとする時間を指定。(単位:ミリ秒)(デフォルトは制限なし)
maximumAgeNumber端末にキャッシュされた、古い位置情報の取得を許したい場合に使用します。
許容する時間を指定。(単位:ミリ秒)(デフォルトは 0)
 
PositionOptions オブジェクトを用意する

// オブジェクトを作成
var position_options = new Object();

// GPS などの高品質な情報を受け取リたいか
position_options.enableHighAccuracy = true;

// タイムアウトエラーとする時間を指定 (単位:ミリ秒)
position_options.timeout = 1000;

// 古い位置情報の取得を許容する場合、時間を指定 (単位:ミリ秒)
position_options.maximumAge = 0;