月: 2022年1月

javascriptのGeolocation APIを使用して緯度経度を取得する方法を紹介します。WEB制作の現場では、登録ユーザーの位置情報を記録したり、アップロードファイルと紐づけたり、ほかのAPIと組み合わせて住所まで割り出したりといった場面で活躍すると思います。

Geolocation APIの概要や使い方まで含む記事となるのでスニペットだけサクッとコピーして編集して使いたいといった場合は一番下の方までスキップしてください。

Geolocation APIで位置情報を取得する。

現在、ほとんどのブラウザでGeolocation APIを使用することが可能です。Geolocation APIでは端末の最良の機能を利用して位置情報の取得が可能です。

Geolocation APIの使用方法はものすごく簡単です。基本的に以下の2つのどちらかで位置情報を受け取ります。

位置情報へのアクセス

navigator.geolocation.getCurrentPosition() //端末の現在の位置情報を受け取る
nabigator.geolocation.watchPosition() //端末の位置が変化するごとに自動的に受け取る

機能の違いとしては位置情報が変化したら新しい位置情報を受け取るか、受け取らないかの違いです。

どちらのメソッドも最大３つの引数を持ち、必須となっているものは成功した時のコールバック関数のみです。その他にはエラー時のコールバック関数、オプションを指定できます。

これまでを踏まえて以下のようなテンプレートを用意しました。

function success(position){ //位置情報が取得できた時の処理

  }
function error(error){ //位置情報が取得できなかった場合の処理

  }
let option = { //その他の設定値

  }

navigator.geolocation.getCurrentPosition(success, error, option);

このテンプレートを少しずつ編集していきます。

ここで気になるのが 成功した場合のコールバック関数の引数の部分で指定されているpositionだと思います。このコールバック関数にはGeolocationPositionオブジェクトが引数として渡されるのでpositionという引数で情報を渡しております。

緯度、経度の取得

緯度と経度を取得するにはGeolocationPositionオブジェクトのcoordsを使用します。上記のテンプレートの様にpositionでオブジェクトを受け取った場合以下のように取得します。

position.coords.latitude //緯度
position.coords.longitude //経度

その他、受け取れる値は以下のものがあります。

エラー処理

次にいくつかのエラー処理の方法を解説します。一点目はブラウザが非対応の場合です。この場合は以下のような条件分岐で判別できます。

if(!navigator.geolocation){//geolocationが使用できないときの処理
}

次に、geolocation APIはブラウザが対応しているが何らかの理由により、エラーとなる場合です。この場合はテンプレートで解説しているエラー時の処理コールバック関数を使用します。このエラーコールバックではGeolocationPositioErrorオブジェクトによりエラーコードを提供してくれます。テンプレートではerrorという引数で渡しております。

エラーコードを取得するには以下を参照してください。

error.code  //エラーコードの取得

エラーコードは以下の3つです。

タイムアウト時間の設定については次に解説します。

オプションの設定

navigator.geolocation.getCurrentPosition、nabigator.geolocation.watchPositionそれぞれ、第3引数にてオプションの設定が可能です。

設定可能な項目は以下の3つです。

一例として以下のような書き方で記述します。

enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0

サンプルコード

これまでざっとGeolocation APIの使い方について解説してきました。次は実際にボタンを設置して位置情報を取得してみましょう。試しにしたのボタンをクリックしてみてください。

アラートで座標、もしくはエラー内容が表示されたはずです。このボタンを実現するサンプルコートは実はたったのこれだけです。

<div class="text-center">
    <button id="find-location">位置情報を取得する。</button>
</div>
<script>
    function findMe() { 
        function success(position){ //位置情報が取得できた時の処理
            const latitude  = position.coords.latitude;
            const longitude = position.coords.longitude;
            alert(`座標の取得が完了しました。\n緯度：${latitude} \n経度：${longitude}`);
        }
        function error(error){ //位置情報が取得できなかった場合の処理
            let e = "";
            if (error.code == 1) { //位置情報取得がブラウザ設定で許可されていない。
                e = "位置情報がブラウザ設定より許可されていません。";
            }
            if (error.code == 2) { //内部エラーにより位置情報が特定できない。
                e = "現在位置を特定できません";
            }
            if (error.code == 3) { //タイムアウト
                e = "タイムアウト";
            }
            alert(e);
        }
        let option = { //その他の設定値
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        }

        if(!navigator.geolocation) {
            status.textContent = 'geolocationがブラウザでサポートされていません。';
        } else {
            navigator.geolocation.getCurrentPosition(success, error);
        }
    }

    document.getElementById('find-location').addEventListener('click', findMe);
</script>

エラー処理を加えてもたったこれだけで位置情報が取得することができます。WEBアプリケーション制作時に恐らくこれが一番簡単な位置情報の取得方法です。この緯度経度情報でMAPアプリや様々なものに応用することが可能です。