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 を使用して、空のスパンをすべて入力します。

ステップ 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;
});
};

このドメインのアプリが権限をリクエストするのは初めての場合、通常、ブラウザはユーザーの同意を確認します。ブラウザによっては、権限の検索を常に許可または禁止する設定もあります。この場合、確認プロセスはバイパスされます。

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

ステップ 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() ハンドラに追加の行を追加して、走行距離を入力します。

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;
}