トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

位置情報を取得(Geolocation API)

JavaScriptで位置情報を取得

Webブラウザのgeolocationオブジェクトを使うと、JavaScriptで現在位置(緯度/経度/高度と移動中なら速度/方向)を取得することができます。サンプルを作ってみました。最初に位置情報を取得する許可を求められます。

geolocation

geolocationは、Webブラウザ上のアプリケーション(JavaScript)で位置情報を利用するための仕組みです。navigatorが持つオブジェクトの形で実装され、現在ではパソコン用も含めほとんどのWebブラウザで利用できるようになっています。

位置情報を取得するgetCurrentPosition()

getCurrentPosition()を呼び出すと、すぐに制御が返されます(次の文が実行される)。そして、位置情報の取得に成功すると、引数に渡した関数にPositionオブジェクトが渡されます。

Positionオブジェクトには、取得した位置情報と取得時間が格納されているので、その情報を使って処理を行うわけです。

navigator.geolocation.getCurrentPosition(success[, error[, [options]])

引数

  • success
    • コールバック関数で、GeolocationPosition オブジェクトを唯一の入力引数として受け取るものです。
  • error
    • 任意のコールバック関数で、GeolocationPositionError オブジェクトを唯一の入力引数として受け取るものです。
  • option
    • 任意の PositionOptions オブジェクトです。

位置情報を取得し続けるwatchPosition()

watchPosition()は、getCurrentPosition()と同じ引数で呼び出しますが、呼び出した後は位置情報の更新があった時など継続的に位置情報が更新され、引数に渡した関数に通知されます。

-

SOURCE

<html lang="ja">
<head>
<meta charset=utf-8>
<script>
//ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

/***** ユーザーの現在の位置情報を取得 *****/
function successCallback(position) {
   var gl_text = "緯度:" + position.coords.latitude + "<br>";
       gl_text += "経度:" + position.coords.longitude + "<br>";
       gl_text += "高度:" + position.coords.altitude + "<br>";
       gl_text += "緯度・経度の誤差:" + position.coords.accuracy + "<br>";
       gl_text += "高度の誤差:" + position.coords.altitudeAccuracy + "<br>";
       gl_text += "方角:" + position.coords.heading + "<br>";
       gl_text += "速度:" + position.coords.speed + "<br>";
   document.getElementById("show_result").innerHTML = gl_text;
}

/***** 位置情報が取得できない場合 *****/
function errorCallback(error) {
   var err_msg = "";
   switch(error.code)
   {
       case 1:
           err_msg = "位置情報の利用が許可されていません";
           break;
       case 2:
           err_msg = "デバイスの位置が判定できません";
           break;
       case 3:
           err_msg = "タイムアウトしました";
           break;
   }
   document.getElementById("show_result").innerHTML = err_msg;
   //デバッグ用→ document.getElementById("show_result").innerHTML = 
error.message;
}
</script>
<title>Geolocation API サンプル</title>
</head>
<body>
<p>あなたの現在位置</p>
<div id="show_result"></div>
</body> 
</html>