位置情報を取得する方法 - Taisei20/its-movi GitHub Wiki

Geolocation API

Geolocation APIは、JavaScriptでユーザーの位置情報を扱うためのAPIであり、
ウェブの標準化団体であるW3Cが仕様策定を進める規格です。公式ページ

これはGPSのみから取得するのではなく、無線LANやWiFi、携帯電話基地局、IPアドレスなどからも位置情報を取得することができます。

ユーザー環境でGeolocation APIが利用できるか確認する

if (navigator.geolocation) {
    // Geolocation APIを利用できる環境向けに処理を記述
    // its-moviではシーン登録の際に使う可能性あり！？
} else {
    // Geolocation APIを利用できない環境向けに処理を記述
    // its-moviでは位置情報を取得できないため手入力で対応する！？
}

位置情報を取得に関する3つのメソッド

getCurrentPosition():ユーザーの現在の位置情報を1回だけ取得する
watchPosition():ユーザーの位置情報を定期定期に監視する
clearWatch():watchPosition()による位置情報の監視をクリアする

getCurrentPosition()メソッド

このメソッドには3つの引数を指定することができます。

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {detail});

1番目の引数は位置情報の取得に成功した場合のコールバック関数を指定します。（必須）
2番目の引数は位置情報の取得ができなかった場合のコールバック関数を指定します。（オプション）
3番目についてはこちらを確認してみてください。

位置情報の取得に成功した場合の処理

getCurrentPosition()メソッドで位置情報を取得すると、コールバック関数にPositionというオブジェクトが渡されます。
このPositionオブジェクトのcoordsから緯度、経度、高度などの値を取得できます。

coords属性から取得できる情報

属性名	値の内容	単位
latitude	緯度(-180~180)	度
longitude	経度(-90~90)	度
attitude	高度	m
accuracy	緯度・経度の誤差	m
heading	方角(-~360)	度
speed	速度	m/秒

/***** ユーザーの現在の位置情報を取得 *****/
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;
}

位置情報の取得ができなかった場合の処理

位置情報のリクエストをしても、ユーザー側の許可設定、接続環境、電波状況などによって位置情報が取得できない場合があります。そのような場合に備えて、あらかじめエラー処理をしておくほうが良いでしょう。

位置情報のエラーコード

コード値	キーワード値	エラー内容
1	PERMISSION_DENIED	ユーザーが位置情報の利用を許可しなかった場合など
2	POSITION_UNAVAILABLE	デバイスの位置が判定できないなど
3	TIMEOUT	timeout属性で指定された時間内に取得できなかった場合など

/***** 位置情報が取得できない場合 *****/
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;
}