JavaScriptで位置情報を取得する方法(Geolocation API)

JavaScript

// 現在位置を取得する
navigator.geolocation.getCurrentPosition( successFunc , errorFunc , optionObj ) ;

JavaScript

// 成功した時の関数
function successFunc( position )
{
	// 緯度をアラート表示
	alert( position.coords.latitude ) ;

	// 経度をアラート表示
	alert( position.coords.longitude ) ;
}

JavaScript

// 失敗した時の関数
function errorFunc( error )
{
	// エラーコードのメッセージを定義
	var errorMessage = {
		0: "原因不明のエラーが発生しました…。" ,
		1: "位置情報の取得が許可されませんでした…。" ,
		2: "電波状況などで位置情報が取得できませんでした…。" ,
		3: "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。" ,
	} ;

	// エラーコードに合わせたエラー内容をアラート表示
	alert( errorMessage[error.code] ) ;
}

JavaScript

// オプション・オブジェクト
var optionObj = {
	"enableHighAccuracy": false ,
	"timeout": 8000 ,
	"maximumAge": 5000 ,
} ;

JavaScript

// 現在位置を取得する
navigator.geolocation.getCurrentPosition( successFunc , errorFunc , optionObj ) ;

JavaScript

// ユーザーの端末がGeoLocation APIに対応しているかの判定

// 対応している場合
if( navigator.geolocation )
{
	// 現在地を取得
	navigator.geolocation.getCurrentPosition(

		// [第1引数] 取得に成功した場合の関数
		function( position )
		{
			// 取得したデータの整理
			var data = position.coords ;

			// データの整理
			var lat = data.latitude ;
			var lng = data.longitude ;
			var alt = data.altitude ;
			var accLatlng = data.accuracy ;
			var accAlt = data.altitudeAccuracy ;
			var heading = data.heading ;			//0=北,90=東,180=南,270=西
			var speed = data.speed ;

			// アラート表示
//			alert( "あなたの現在位置は、\n[" + lat + "," + lng + "]\nです。" ) ;

			// HTMLへの書き出し
			document.getElementById( 'result' ).innerHTML = '<dl><dt>緯度</dt><dd>' + lat + '</dd><dt>経度</dt><dd>' + lng + '</dd><dt>高度</dt><dd>' + alt + '</dd><dt>緯度、経度の精度</dt><dd>' + accLatlng + '</dd><dt>高度の精度</dt><dd>' + accAlt + '</dd><dt>方角</dt><dd>' + heading + '</dd><dt>速度</dt><dd>' + speed + '</dd></dl>' ;

			// 位置情報
			var latlng = new google.maps.LatLng( lat , lng ) ;

			// Google Mapsに書き出し
			var map = new google.maps.Map( document.getElementById( 'map-canvas' ) , {
				zoom: 15 ,				// ズーム値
				center: latlng ,		// 中心座標 [latlng]
			} ) ;

			// マーカーの新規出力
			new google.maps.Marker( {
				map: map ,
				position: latlng ,
			} ) ;
		},

		// [第2引数] 取得に失敗した場合の関数
		function( error )
		{
			// エラーコード(error.code)の番号
			// 0:UNKNOWN_ERROR				原因不明のエラー
			// 1:PERMISSION_DENIED			利用者が位置情報の取得を許可しなかった
			// 2:POSITION_UNAVAILABLE		電波状況などで位置情報が取得できなかった
			// 3:TIMEOUT					位置情報の取得に時間がかかり過ぎた…

			// エラー番号に対応したメッセージ
			var errorInfo = [
				"原因不明のエラーが発生しました…。" ,
				"位置情報の取得が許可されませんでした…。" ,
				"電波状況などで位置情報が取得できませんでした…。" ,
				"位置情報の取得に時間がかかり過ぎてタイムアウトしました…。"
			] ;

			// エラー番号
			var errorNo = error.code ;

			// エラーメッセージ
			var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ;

			// アラート表示
			alert( errorMessage ) ;

			// HTMLに書き出し
			document.getElementById("result").innerHTML = errorMessage;
		} ,

		// [第3引数] オプション
		{
			"enableHighAccuracy": false,
			"timeout": 8000,
			"maximumAge": 2000,
		}

	) ;
}

// 対応していない場合
else
{
	// エラーメッセージ
	var errorMessage = "お使いの端末は、GeoLacation APIに対応していません。" ;

	// アラート表示
	alert( errorMessage ) ;

	// HTMLに書き出し
	document.getElementById( 'result' ).innerHTML = errorMessage ;
}

JavaScript

// 位置情報の追跡を開始する
// watchIdというIDを付けておく
var watchId = navigator.geolocation.watchPosition( successFunc , errorFunc , optionObj ) ;

JavaScript

// 位置情報の追跡を中止する
navigator.geolocation.clearWatch( watchId ) ;

JavaScript

// グローバル変数
var syncerWatchPosition = {
	count: 0 ,
	lastTime: 0 ,
	map: null ,
	marker: null ,
} ;

// 成功した時の関数
function successFunc( position )
{
	// データの更新
	++syncerWatchPosition.count ;					// 処理回数
	var nowTime = ~~( new Date() / 1000 ) ;	// UNIX Timestamp

	// 前回の書き出しから3秒以上経過していたら描写
	// 毎回HTMLに書き出していると、ブラウザがフリーズするため
	if( (syncerWatchPosition.lastTime + 3) > nowTime )
	{
		return false ;
	}

	// 前回の時間を更新
	syncerWatchPosition.lastTime = nowTime ;

	// HTMLに書き出し
	document.getElementById( 'result' ).innerHTML = '<dt>緯度</dt><dd>' + position.coords.latitude + '</dd><dt>経度</dt><dd>' + position.coords.longitude + '</dd><dt>高度</dt><dd>' + position.coords.altitude + '</dd><dt>速度</dt><dd>' + position.coords.speed + '</dd><dt>実行回数</dt><dd>' + syncerWatchPosition.count + '回</dd>' ;

	// 位置情報
	var latlng = new google.maps.LatLng( position.coords.latitude , position.coords.longitude ) ;

	// Google Mapsに書き出し
	if( syncerWatchPosition.map == null )
	{
		// 地図の新規出力
		syncerWatchPosition.map = new google.maps.Map( document.getElementById( 'map-canvas' ) , {
			zoom: 15 ,				// ズーム値
			center: latlng ,		// 中心座標 [latlng]
		} ) ;

		// マーカーの新規出力
		syncerWatchPosition.marker = new google.maps.Marker( {
			map: syncerWatchPosition.map ,
			position: latlng ,
		} ) ;
	}
	else
	{
		// 地図の中心を変更
		syncerWatchPosition.map.setCenter( latlng ) ;

		// マーカーの場所を変更
		syncerWatchPosition.marker.setPosition( latlng ) ;
	}
}

// 失敗した時の関数
function errorFunc( error )
{
	// エラーコードのメッセージを定義
	var errorMessage = {
		0: "原因不明のエラーが発生しました…。" ,
		1: "位置情報の取得が許可されませんでした…。" ,
		2: "電波状況などで位置情報が取得できませんでした…。" ,
		3: "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。" ,
	} ;

	// エラーコードに合わせたエラー内容を表示
	alert( errorMessage[error.code] ) ;
}

// オプション・オブジェクト
var optionObj = {
	"enableHighAccuracy": false ,
	"timeout": 1000000 ,
	"maximumAge": 0 ,
} ;

// 現在位置を取得する
navigator.geolocation.watchPosition( successFunc , errorFunc , optionObj ) ;