GeolocationのwatchPosition()を使用していて以下のようなエラーが表示された経験はありませんか？

GeolocationPositionError: User denied geolocation prompt

このエラーは位置情報の取得が拒否された際に発生する代表的なエラーです。今回はwatchPosition()の基本的な使い方とエラー対処法について解説します。

watchPosition()とは

watchPosition()は位置情報を継続的に監視するためのメソッドです。端末の位置が変化するたびに指定したコールバック関数が実行されます。

基本的な使い方は以下のようになります：

const watchId = navigator.geolocation.watchPosition(
    // 成功時のコールバック
    (position) => {
        console.log("緯度:", position.coords.latitude);
        console.log("経度:", position.coords.longitude);
    },
    // エラー時のコールバック
    (error) => {
        console.error("エラーが発生しました:", error);
    },
    // オプション
    {
        enableHighAccuracy: true,  // 高精度な位置情報を取得
        timeout: 5000,             // タイムアウト時間（ミリ秒）
        maximumAge: 0              // キャッシュの有効期限
    }
);

主なエラーと対処法

1. 位置情報の許可が拒否された場合

if (error.code === error.PERMISSION_DENIED) {
    alert("位置情報の使用を許可してください");
    // ブラウザの設定画面へのリンクを表示するなど
}

2. 位置情報を取得できない場合

if (error.code === error.POSITION_UNAVAILABLE) {
    alert("位置情報を取得できません。電波状況をご確認ください");
}

3. タイムアウトの場合

if (error.code === error.TIMEOUT) {
    alert("位置情報の取得がタイムアウトしました");
}

監視の停止方法

位置情報の監視を停止する場合は、clearWatch()メソッドを使用します：

navigator.geolocation.clearWatch(watchId);

実装時の注意点

1. ブラウザ対応の確認

if ("geolocation" in navigator) {
    // 位置情報が利用可能
} else {
    alert("お使いのブラウザは位置情報に対応していません");
}

2. バッテリー消費への配慮

継続的な位置監視はバッテリーを消費するため、必要なときだけ監視を行うようにしましょう。

3. エラーハンドリングの実装

必ずエラー処理を実装し、ユーザーに適切なフィードバックを提供しましょう。

まとめ

watchPosition()を使用することで、リアルタイムな位置情報の監視が可能になります。ただし、ユーザーのプライバシーやバッテリー消費に配慮した実装を心がけることが重要です。適切なエラーハンドリングと、必要なときだけ監視を行う設計を意識しましょう。

これらの実装方法とエラー対処を押さえておくことで、より安定した位置情報監視機能を実現できます。