JavaScript プログラミング講座


ジオロケーションについて



・Geolocation クラスについて
・位置情報を取得する

前のページに戻る

　

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引数（オプション）
　
オブジェクトを１つ用意して、こちらで解説しているプロパティを設定します。
　
その後、第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引数（オプション）
　
オブジェクトを１つ用意して、こちらで解説しているプロパティを設定します。
　
その後、第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高度（単位:メートル）（WGS84楕円体からの高さ）
altitudeAccuracyNumber高度の精度レベル（大きいほど誤差がある）（単位:メートル）（ 0 以上）
headingNumber方角（単位:角度、真北が 0度）
speedNumber速度（単位:秒速メートル m/s）
　
■楕円体高から日本の標高に変換するには？
　
国土地理院からジオイド高を入手して、楕円体高から減算します。
　
例えば、日本水準原点は、緯度35.67721941 経度139.74784699 の位置に在ります。
　
標高は、24.39 メートルです。(2025年時点)
　
この位置で GPS 計測できる高度（楕円体高）は、約 61 メートルです。
　
この位置のジオイド高は、36.8046 メートルです。(2025年時点)
　
「楕円体高 - ジオイド高 = 日本の標高」となります。
　
61 - 36.8046 ≒ 24.39
　

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

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

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

　
■ PositionOptions オブジェクトのプロパティ
　
PositionOptions オブジェクトは、位置情報取得用の設定を、１つオブジェクトに格納して渡すための仕様です。
　
オブジェクトを１つ生成して、以下のプロパティをセットします。
　
プロパティ名型説明
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;
　
　
上に戻る

　
前のページに戻る