【STEP.38】
Geolocation APIの使い方をマスターしよう!

Geolocation APIとは

Geolocation APIを利用することで、現在の位置情報を取得できます。

ただし、Geolocation APIは環境に応じて、GPS(全地球測位システム)をはじめ、Wi-Fi、携帯電話の基地局、IPアドレスなどから位置情報を割り出します。

ネットワーク環境によっては、取得できる位置情報の精度も変動するので、注意してください。

現在の位置情報を取得する

以下は、現在の位置情報を取得する例です。

<ul>
  <li>経度:<span id="latitude"></span>
  <li>緯度:<span id="longitude"></span>
</ul>
let latitude = document.getElementById('latitude');
let longitude = document.getElementById('longitude');
// 位置情報を取得
navigator.geolocation.getCurrentPosition(function (pos) {
  latitude.textContent = pos.coords.latitude; // 緯度
  longitude.textContent = pos.coords.longitude; // 経度
});

Geolocation APIには、navigator.geolocationプロパティでアクセスできます。

ユーザーの現在位置を取得するには、getCurrentPositionメソッドを呼び出して下さい。

getCurrentPositionメソッド

navigator.geolocation.getCurrentPosition(function(pos) {
  ...statements...
})
pos         取得できた位置情報(Positionオブジェクト)
statements  位置情報を取得できた場合の処理

引数で指定された関数は、位置情報を取得できたときに呼び出される処理です。(成功コールバックといいます。)

引数として、取得できた位置情報(Positionオブジェクト)を受け取りますので、成功コールバックの中では、このPositionオブジェクトを利用して、以降の処理を実施します。

Positionオブジェクトの主なプロパティは、次に掲げる表の通りです。

【Positionオブジェクトの主なプロパティ】
プロパティ概要
coords位置情報(coordinatesオブジェクト)
プロパティ概要
altitude高度
latitude緯度
longitude経度
accuracy緯度/経度の誤差(m)
altitudeAccuracy高度の誤差(m)
heading方角(度)
speed速度(m/秒)
timestamp取得日時(1970年からの経過ミリ秒)

ここでは、経度/緯度情報をページに反映しているだけですが、たとえば現在位置をGoogle Maps API(https://developers.google.com/maps/)で地図に反映させるような使い方もできます。

位置情報取得時にエラー処理や取得オプションを設定する

位置情報取得時にエラー処理や取得オプションを設定するには、getCurrentPositionメソッドの第2引数(エラー処理)、第3引数(取得オプション)それぞれに設定します。

<ul>
  <li>経度:<span id="latitude"></span>
  <li>緯度:<span id="longitude"></span>
</ul>
let latitude = document.getElementById('latitude');
let longitude = document.getElementById('longitude');
	
navigator.geolocation.getCurrentPosition(
  function (pos) {
    latitude.textContent = pos.coords.latitude;
    longitude.textContent = pos.coords.longitude;
  },
  // エラー時に呼び出される失敗コールバック関数
  function (pe) {
    // エラーメッセージを配列として準備
    let errors = [
      pe.message,
      '位置情報の取得が許可されていません。',
      '位置情報の取得は失敗しました。',
      '位置情報の取得中にタイムアウトしました。',
    ];
    window.alert(erros[pe.code]);
  },
  // 取得オプション
  {
    timeout: 100,
    maximumAge: 0,
    enableHighAccuracy: true,
  }
);

上のJavaScriptのコード10~19行目のエラー処理(失敗コールバック)は、引数としてPositionErrorオブジェクトを受け取ります。(表1-1)

コールバック関数の配下では、この情報をもとにエラーメッセージなどを生成します。

【PositionErrorオブジェクトのプロパティ(表1-1)】
プロパティ概要
codeエラーコード
意味
0不明なエラー
1位置情報の取得を拒否
2位置情報の取得が不可
3取得処理中にタイムアウト
message詳細なエラーメッセージ

サンプルでは、あらかじめエラーコードに対応したエラーメッセージを、配列(0~3)として用意しておくことで、「errors[pe.code]」でエラーメッセージを取得できるようにしています。

取得オプションは、上のJavaScriptのコード21~25行目のように「オプション名: 値」形式のハッシュで指定できます。

指定できるオプションは、次に掲げる表の通りです。

【主な取得オプション(PositionOptionsオブジェクトのプロパティ)】
オプション概要
timeout位置情報の取得タイムアウト(ミリ秒)
maximumAge位置情報のキャッシュ期限(ミリ秒)。0でキャッシュしない(=常に最新情報を取得)
enableHighAccuracy高精度の位置情報を取得するか(true/false)

位置情報取得に関して、タイムアウトエラーが頻繁に発生する場合には、タイムアウト時間が短すぎる可能性がありますので、timeoutオプションを長めに設定してください。(サンプルではエラー確認のためにあえて短めにタイムアウト時間を設定しています。)

enableHighAccuracyオプションをtrueにした場合、スマホ環境ではGPSで位置情報を取得しようとします。

これによって、位置情報の精度は向上します。

その分、バッテリーの消費も激しくなりますので、注意してください。(既定では、精度が低くても、高速に応答する手段を優先します。)

定期的に位置情報を取得する

定期的に位置情報を取得するならば、watchPositionメソッドを利用します。

<ul>
  <li>経度:<span id="latitude"></span>
  <li>緯度:<span id="longitude"></span>
</ul>
<input id="btn" type="button" value="監視をやめる" />
let latitude = document.getElementById('latitude');
let longitude = document.getElementById('longitude');
let btn = document.getElementById('btn');
	
// 位置情報を定期的に取得
let id = navigator.geolocation.watchPosition(function (pos) {
  latitude.textContent = pos.coords.latitude; // 緯度
  longitude.textContent = pos.coords.longitude; // 経度
});
	
// ボタンクリックで監視を中止
document.getElementById.addEventListener('click', function () {
  navigator.geolocation.clearWatch(id);
});

watchPositionメソッドの構文は、以下の通りです。

watchPositionメソッド

navigator.geolocation.watchPosition (
  function (pos) {
    ...ok_statementes...
  },
  function (err) {
    ...ng_statements...
  },
  options
)
pos            取得した位置情報
ok_statements  位置情報を取得できた時の処理 
err            エラー情報
ng_statements  位置情報の取得に失敗した時の処理
options        動作オプション

構文はgetCurrentPositionメソッドと共通で、失敗コールバック/取得オプションを省略できる点も同じです。

ただし、戻り値が異なります。

getCurrentPositionメソッドが戻り値を持たないのに対して、watchPositionメソッドは監視ID(監視を識別するためのid値)を返します。

監視IDをclearWatchメソッドを渡すことで、位置情報の監視を中止できます。(navigator.geolocation.clearWatch(id);/上のJavaScriptのコード13行目)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です