読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Geolocation オブジェクト

現在地情報を取得できるオブジェクトです。
モバイルデバイスに限らず、PCのブラウザにも使用することが可能です。メソッドは3種類用意されています

getCurrentPosition(success, error, options)
現在地を一度だけ取得します。引数は「成功時の処理」「失敗時の処理」「オプション」です。オプションには精度やタイムアウトの設定を行うことが出来ます。
watchPosition(success, error, options)
デバイスを監視して、位置情報が変わるたびにsuccessを実行します。引数はgetCurrentPositionと同じです。
clearWatch(id)
watchPositionでの監視を終了します。引数は、watchPositionでインスタンス化したオブジェクトの名前です。

以下に、主要な機能を使ったサンプルを記述します。

// geolocationが使用できるか確認
if (navigator.geolocation) {
    // プロパティを作成
    var options = {
        // 制度を細かくする
        enableHighAccuracy: true,
        // タイムアウトの設定
        timeout: 5000,
        // 有効期限の設定
        maximumAge: 0
    };
    
    // 現在地を取得
    var geoData = navigator.geolocation.getCurrentPosition(
                    success, denide, options);
} else {
    console.warn('現在のブラウザでは位置情報を取得できません');
}

// 成功した時の処理。プロパティ一覧を表示する
function success(data)
{
    var text = '';
    text += ('緯度(-180~180)=' + data.coords.latitude + '度\n');
    text += ('経度(-90~90)=' + data.coords.longitude + '度\n');
    text += ('緯度・経度の誤差=' + data.coords.accuracy + 'メートル\n');
    text += ('\n');
    text += ('高度=' + data.coords.longitude + 'メートル\n');
    text += ('高度の誤差=' + data.coords.altitudeAccuracy + 'メートル\n');
    text += ('\n');
    text += ('方角=' + data.coords.heading + '度\n');
    text += ('速度=' + data.coords.speed + 'm/秒\n');
    text += ('\n');
    text += ('タイムスタンプ=' + data.timestamp + '\n');
    alert(text);
}

// 失敗した時の処理。
function denide()
{
    alert('現在地の取得に失敗しました');
}

参考サイト

Geolocation MDN

developer.mozilla.org

Geolocation API

www.htmq.com