JavaScriptで位置情報(GPS)取得

JavaScriptで位置情報の取得が可能です。ただし、正しい位置とならないこともあります。

GPSを搭載したスマートフォンやノートパソコンでGPS機能が利用可能となっている場合は、ほぼ正しい位置を取得できます。その他の場合は、携帯キャリアのアクセスポイント（基地局）となったりIPアドレスを管理しているプロバイダの位置となったりします。

実際に「東京都世田谷区」の光回線を使用したパソコン（GSPなし）で位置情報を取得したところ、「東京都千代田区」と表示されました。
GPSを利用した場合は位置も正しくなりますが、正しい位置を取得できない場合も多くありますので、利用には注意が必要です。

位置情報取得には以下の関数(API)があります。

取得できるには以下の値となります。

以下のサンプルを実行すると、サンプルを実行したJavaScriptが表示されます。
サンプル実行された位置情報は保管しておりませんのでご安心ください。

スマホの場合は、このQRコードで当ページが開きます。

現在の位置情報を1回取得

近くのお店情報や現在地の天気など、位置情報を1回取得すればいい場合は「getCurrentPosition」を使用します。
ただし「getCurrentPosition」は位置の確認精度が低いとの情報もあり、「watchPosition」を一定時間実行する方がより正確に近づく可能性もあります。（もともと正確な位置情報でない可能性が高いとお考えください）
以下のサンプルでご確認ください。

取得中

エラー

情報		取得値	単位
位置	緯度		度
	経度		度
	誤差		m
高さ	高度		m
	誤差		m
向き	方角		度
移動	速度		m/s
地図(GoogleMap)で取得した位置確認

サンプルを実行したJavaScriptは以下となります

// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // // 【 現在地の取得サンプル 】 http://www.cman.jp // // cmanPosGet() を実行すると、現在位置の取得を行います。 // // 【デモ用】の箇所は、でも（サンプル）の表示用です。 // このため、使用に合わせた変更が必要です。 // // 商用,改変,再配布はすべて自由ですですが、動作保証はありません // // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ //================================================================================================== // 位置取得 成功時に実行される //================================================================================================== function cmanGetOk(argPos){ // --- 取得した値を出力 ------------------------------------------------------------------------ document.getElementById("getLatitude").innerHTML = argPos.coords.latitude; // 緯度 document.getElementById("getLongitude").innerHTML = argPos.coords.longitude; // 経度 document.getElementById("getAccuracy").innerHTML = argPos.coords.accuracy; // 緯度・経度の誤差 document.getElementById("getAltitude").innerHTML = argPos.coords.altitude; // 高度 document.getElementById("getAltitudeAccuracy").innerHTML = argPos.coords.altitudeAccuracy; // 高度の誤差 document.getElementById("getHeading").innerHTML = argPos.coords.heading; // 方角(0:北) document.getElementById("getSpeed").innerHTML = argPos.coords.speed; // 速度 // ---【デモ用】取得した位置の地図リンク編集 --------------------------------------------------- document.getElementById("getLocationMap").href = 'http://maps.google.com/maps?q=' + argPos.coords.latitude + ',' + argPos.coords.longitude; // ---【デモ用】結果表示制御 ------------------------------------------------------------------- cmanGetDisplayCtrl('OK'); } //================================================================================================== // 位置取得 失敗時に実行される //================================================================================================== function cmanGetErr(argErr){ var wErrMsg = ""; switch(argErr.code){ case 1 : wErrMsg = "位置情報の利用が許可されていません";break; case 2 : wErrMsg = "デバイスの位置が判定できません";break; case 3 : wErrMsg = "タイムアウトしました";break; } if(wErrMsg == ""){wErrMsg = argErr.message;} // --- エラーメッセージ出力 -------------------------------------------------------------------- document.getElementById("getErrMag").innerHTML = wErrMsg; // ---【デモ用】結果表示制御 ------------------------------------------------------------------- cmanGetDisplayCtrl('ERR'); } //================================================================================================== // 位置取得 実行 //================================================================================================== function cmanPosGet(){ // --- ブラウザが対応しているかチェック -------------------------------------------------------- if (typeof navigator.geolocation === 'undefined') { document.getElementById("getErrMag").innerHTML = 'ブラウザが位置情報取得に対応していません'; cmanGetDisplayCtrl('ERR'); return false; } // --- オプション設定 -------------------------------------------------------------------------- var wOptions = { "enableHighAccuracy": true, // true : 高精度 "timeout": 10000, // タイムアウト : ミリ秒 "maximumAge": 0, // データをキャッシュ時間 : ミリ秒 }; // --- 位置取得 -------------------------------------------------------------------------------- navigator.geolocation.getCurrentPosition(cmanGetOk, // 位置取得成功時に実行される関数 cmanGetErr, // 位置取得失敗時に実行される関数 wOptions ); // オプション // ---【デモ用】結果表示制御 ------------------------------------------------------------------- cmanGetDisplayCtrl('START'); return true; } //================================================================================================== // 【デモ用】結果表示制御 (デモ画面の表示制御用のため、サンプル動作には関係ありません) //================================================================================================== function cmanGetDisplayCtrl(argMsg){ // --- 結果表示制御 ---------------------------------------------------------------------------- document.getElementById("getOut-area").style.display = ''; switch(argMsg){ case 'OK' : document.getElementById("getShorichu").style.display = 'none'; document.getElementById("getOut-err-area").style.display = 'none'; document.getElementById("getOut-ok-area").style.display = ''; break; case 'ERR' : document.getElementById("getShorichu").style.display = 'none'; document.getElementById("getOut-err-area").style.display = ''; document.getElementById("getOut-ok-area").style.display = 'none'; break; default : document.getElementById("getShorichu").style.display = ''; document.getElementById("getOut-err-area").style.display = 'none'; document.getElementById("getOut-ok-area").style.display = 'none' break; } // --- 結果エリアにゆっくりスクロール ---------------------------------------------------------- // https://web-designer.cman.jp/javascript_ref/window/link_scroll/ を参照 cmanLinkScroll('getOut-area'); }

当画面専用のロジックも含まれています。改造してご利用ください。

現在の位置情報を繰返し取得（位置の移動監視）

歩きながら、車で移動中などスマホの位置を定期的に取得したい場合は「watchPosition」を使用します。（もともと正確な位置情報でない可能性が高いとお考えください）
以下のサンプルでご確認ください。

取得中

エラー

情報		取得値	単位
位置	緯度		度
	経度		度
	誤差		m
高さ	高度		m
	誤差		m
向き	方角		度
移動	速度		m/s

サンプルを実行したJavaScriptは以下となります

// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // // 【 現在地の取得サンプル 】 http://www.cman.jp // // cmanPosWatch() を実行すると、現在位置の追跡を行います。 // // 【デモ用】の箇所は、でも（サンプル）の表示用です。 // このため、使用に合わせた変更が必要です。 // // 商用,改変,再配布はすべて自由ですですが、動作保証はありません // // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ var cmanWatchID; // watchPositionのオブジェクト var cmanWatchLoopCnt = 0; //【デモ用】デモを強制的に停止するためのカウンター var cmanWatchLoopMax = 30; //【デモ用】強制的にデモを止める回数 var cmanMapTime; //【デモ用】地図を更新した時間 var cmanMapUpTime = 5; //【デモ用】地図は5秒以上の間隔で更新 //================================================================================================== // 位置取得 成功時に実行される //================================================================================================== function cmanWatOk(argPos){ // --- 取得した値を出力 ------------------------------------------------------------------------ document.getElementById("watLatitude").innerHTML = argPos.coords.latitude; // 緯度 document.getElementById("watLongitude").innerHTML = argPos.coords.longitude; // 経度 document.getElementById("watAccuracy").innerHTML = argPos.coords.accuracy; // 緯度・経度の誤差 document.getElementById("watAltitude").innerHTML = argPos.coords.altitude; // 高度 document.getElementById("watAltitudeAccuracy").innerHTML = argPos.coords.altitudeAccuracy; // 高度の誤差 document.getElementById("watHeading").innerHTML = argPos.coords.heading; // 方角(0:北) document.getElementById("watSpeed").innerHTML = argPos.coords.speed; // 速度 document.getElementById("watDate").innerHTML = (new Date()).toString(); // 取得時間 // ---【デモ用】結果表示制御 ------------------------------------------------------------------- cmanWatDisplayCtrl('OK'); // ---【デモ用】GoogleMapで位置を表示 ---------------------------------------------------------- cmanMapUpdate(argPos.coords.latitude, argPos.coords.longitude, ''); // ---【デモ用】一定回数追跡で自動停止する ----------------------------------------------------- cmanWatchLoopCnt++; if(cmanWatchLoopCnt> cmanWatchLoopMax){ navigator.geolocation.clearWatch(cmanWatchID); document.getElementById("watDate").innerHTML += '<br><span style="color:blue">位置の追跡を停止しました。</span>'; } } //================================================================================================== // 位置取得 失敗時に実行される //================================================================================================== function cmanWatErr(argErr){ var wErrMsg = ""; switch(argErr.code){ case 1 : wErrMsg = "位置情報の利用が許可されていません";break; case 2 : wErrMsg = "デバイスの位置が判定できません";break; case 3 : wErrMsg = "タイムアウトしました";break; } if(wErrMsg == ""){wErrMsg = argErr.message;} // --- エラーメッセージ出力 -------------------------------------------------------------------- document.getElementById("watErrMag").innerHTML = wErrMsg; // ---【デモ用】結果表示制御 ------------------------------------------------------------------- cmanWatDisplayCtrl('ERR'); } //================================================================================================== // 位置取得 実行 //================================================================================================== function cmanPosWatch(){ cmanWatchLoopCnt=0; // --- 何度もボタンを押した対応 ---------------------------------------------------------------- if(typeof cmanWatchID === 'number'){ navigator.geolocation.clearWatch(cmanWatchID); } // --- ブラウザが対応しているかチェック -------------------------------------------------------- if (typeof navigator.geolocation === 'undefined') { document.getElementById("watErrMag").innerHTML = 'ブラウザが位置情報取得に対応していません'; cmanWatDisplayCtrl('ERR'); return false; } // --- オプション設定 -------------------------------------------------------------------------- var wOptions = { "enableHighAccuracy": true, // true : 高精度 "timeout": 10000, // タイムアウト : ミリ秒 "maximumAge": 0, // データをキャッシュ時間 : ミリ秒 }; // --- 位置取得 -------------------------------------------------------------------------------- cmanWatchID = navigator.geolocation.watchPosition(cmanWatOk, // 位置取得成功時に実行される関数 cmanWatErr, // 位置取得失敗時に実行される関数 wOptions ); // オプション // ---【デモ用】結果表示制御 ------------------------------------------------------------------- cmanWatDisplayCtrl('START'); return true; } //================================================================================================== // 【デモ用】結果表示制御 (デモ画面の表示制御用のため、サンプル動作には関係ありません) //================================================================================================== function cmanWatDisplayCtrl(argMsg){ // --- 結果表示制御 ---------------------------------------------------------------------------- document.getElementById("watOut-area").style.display = ''; switch(argMsg){ case 'OK' : document.getElementById("watShorichu").style.display = 'none'; document.getElementById("watOut-err-area").style.display = 'none'; document.getElementById("watOut-ok-area").style.display = ''; break; case 'ERR' : document.getElementById("watShorichu").style.display = 'none'; document.getElementById("watOut-err-area").style.display = ''; document.getElementById("watOut-ok-area").style.display = 'none'; break; default : document.getElementById("watShorichu").style.display = ''; document.getElementById("watOut-err-area").style.display = 'none'; document.getElementById("watOut-ok-area").style.display = 'none' break; } // --- 結果エリアにゆっくりスクロール ---------------------------------------------------------- // https://web-designer.cman.jp/javascript_ref/window/link_scroll/ を参照 if(cmanWatchLoopCnt == 0){ cmanLinkScroll('watOut-area'); } } //================================================================================================== // 【デモ用】地図(Google Map)の更新(デモ画面の表示制御用のため、サンプル動作には関係ありません) //================================================================================================== function cmanMapUpdate(argLatitude , argLongitude , argFlg){ // 読み込みが必要 // <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> // --- 地図の更新頻度チェック ------------------------------------------------------------------ if((typeof cmanMapTime) === 'object'){ var wNowTime = new Date(); if((argFlg != '1')&&(((wNowTime - cmanMapTime) / 1000) < cmanMapUpTime)){ return false; } } cmanMapTime = new Date(); // --- 緯度・経度の編集 ------------------------------------------------------------------------ var wCenterPos = new google.maps.LatLng(argLatitude , argLongitude); // --- オプション編集 -------------------------------------------------------------------------- var wOptions = { zoom: 16, // ズーム率 center: wCenterPos, // 地図中央の座標 mapTypeId: google.maps.MapTypeId.ROADMAP // 通常の地図 }; // --- GoogleMapを表示 ------------------------------------------------------------------------- var wGoogleMap = new google.maps.Map(document.getElementById("watMap"), wOptions); // --- 座標にマーカーを付ける ------------------------------------------------------------------ var wMarker = new google.maps.Marker({ position: wCenterPos, map: wGoogleMap }); }

当画面専用のロジックも含まれています。改造してご利用ください。