Geolocation API を使用したシンプルなトリップメーター

Michael Mahemoff

はじめに

Geolocation API を使用すると、ユーザーの同意を得たうえで、ユーザーの現在地を特定し、移動中のユーザーを追跡できます。この機能は、ユーザーのクエリの一部として使用できます。たとえば、目的地までの案内などです。また、ユーザーが作成したコンテンツに「ジオタグ」を付ける（写真が撮影された場所をマークするなど）ためにも使用できます。この API はデバイスに依存しません。クライアントが標準的な方法で位置情報をリクエストして受信できる限り、ブラウザが位置情報をどのように特定するかは考慮されません。基盤となるメカニズムは、GPS、Wi-Fi、または単にユーザーに位置情報を手動で入力してもらうことかもしれません。これらのルックアップには時間がかかるため、API は非同期です。位置情報をリクエストするたびに、コールバック メソッドを渡します。

この例は、最初の位置を表示し、ページが読み込まれてからの移動距離を表示し続けるトリップメーターです。

ステップ 1. 互換性の確認

Browser Support

• 5
• 12
• 3.5
• 5

Source

互換性を簡単に確認するには、位置情報オブジェクトの有無をテストします。

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

ステップ 2. トリップメーターの HTML を宣言する

この例では、トリップメーターを作成するため、次の HTML を宣言します。

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

次のいくつかのステップでは、Geolocation API を使用して、これらの空の span をすべて埋めます。

ステップ 3. ユーザーの現在地を特定する

getCurrentPosition() は、ユーザーの現在地を非同期で報告します。ページが読み込まれたらすぐに呼び出して、開始位置を正しく入力し、後で使用できるように保存します。

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

このドメインのアプリケーションが初めて権限をリクエストする場合、通常、ブラウザはユーザーの同意を確認します。ブラウザによっては、権限の確認を常に許可または拒否する設定が用意されている場合もあります。その場合、確認プロセスは省略されます。

このコードを実行すると、開始位置が表示されます。ブラウザが使用している位置情報デバイスによっては、position オブジェクトに緯度と経度だけでなく、高度や方向など、より多くの情報が含まれる場合があります。position 変数をコンソールにロギングすることで、さらに詳しく調べることができます。

ステップ 4. エラーを処理する

残念ながら、すべての位置情報の検索が成功するわけではありません。GPS が見つからない場合や、ユーザーが位置情報の検索を突然無効にした場合などが考えられます。getCurrentPosition() の 2 番目の引数（省略可能）は、エラーが発生した場合に呼び出されるため、コールバック内でユーザーに通知できます。

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

ステップ 5. ユーザーの位置情報をモニタリングする

前回の getCurrentPosition() の呼び出しは、ページの読み込み時に 1 回だけ実行されました。変更を追跡するには、watchPosition() を使用します。ユーザーが移動するたびに、コールバック関数が自動的に通知されます。

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

ステップ 6. 移動距離を表示

このステップは Geolocation API に直接関連するものではありませんが、デモを締めくくり、位置情報の使用方法の例を示すものです。watchPosition() ハンドラに 1 行追加して、移動距離を入力します。

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

calculateDistance() 関数は、幾何学的アルゴリズムを実行して 2 つの座標間の距離を決定します。JavaScript の実装は、クリエイティブ・コモンズ ライセンスに基づいて Moveable Type が提供するスクリプトを応用したものです。

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}