javascript での位置取得と submit の備忘録

はじめに

仕事で位置情報を取得する Javascript コードを書いたのでその際の経験を忘れないように記載しておきます。

位置情報取得の構文

以下の構文が現在地を取得する基本的な構文です。

function success(position) {
    // 成功の場合
    var latitude  = position.coords.latitude; // 緯度
    var longitude = position.coords.longitude; // 経度
};
function error() {
    // エラーの場合
    alert("現在位置を取得できません");
};

// 位置情報を取得し、どちらかのコールバック関数を実行
navigator.geolocation.getCurrentPosition(success, error);

Geolocation.getCurrentPosition()

navigator.geolocation.getCurrentPosition(success, error) は端末の現在位置を取得するメソッドです。位置情報の取得に成功した場合は success に与えたコールバック関数を実行し、位置情報の取得に失敗した場合やユーザーが位置情報の取得を拒否した場合は error に与えたコールバック関数を実行します。
その他、第３引数にオプションの設定が可能です。

コールバック関数の入力引数

getCurrentPosition(success, error) のうち、success 側には GeolocationPosition インターフェイスのインスタンスが与えられ、現在位置の情報や取得した時刻が取得できます。
error 側には GeolocationPositionError インターフェイスのインスタンスが与えられ、エラーコードやエラーメッセージを取得できます。

Geolocation.getCurrentPosition() と submit() の併用

ここで、位置情報の取得と submit が並んだ際の挙動について記載しておきます。

問題設定

位置情報の取得と submit() の併用のサンプルとして、

1. 送信するボタンを押下した際に実行される
2. 現在位置を取得して、指定の input に値を設定
3. 設定後にフォームの内容を submit

という処理を行う pushSubmit() 関数を用意するとします。

実際に書いた構文と発生した問題

例えば、以下の様な構文を書いたとします。

function pushSubmit() {
    function success(position) {
        // 成功の場合
        var latitude  = position.coords.latitude; // 緯度
        var longitude = position.coords.longitude; // 経度

        document.getElementById('latitude').value = latitude;
        document.getElementById('longitude').value = longitude;
    };
    function error() {
        // エラーの場合
        alert("現在位置を取得できません");
    };

    // 位置情報の取得を試みる
    navigator.geolocation.getCurrentPosition(success, error);

    // 実際にsubmit
    var form = document.getElementById('form');
    form.submit();
}

この構文は流れとしては 「位置情報の取得 → submit」 と書いているので位置情報が取得できているように思われます。
ですが、実際に実行して submit されたサーバサイドでリクエストパラメータを確認すると以下の様になります。

[
   'latitude' => null,
   'longitude' => null
]

ご覧の通り、取得したはずの位置情報が記載されていません。

これはコードの実行とコールバック関数の処理の順序が原因です。
getCurrentPosition() が実行され、その結果を基に success のコールバック関数が実行される場合でも、successに処理が渡った段階でメインの処理もsubmit()に進むため、successの処理が終わる前に submit されてしまうという流れになります。

対策

対策は簡単で、コールバック関数の中に submit を移動してしまうというものです。

function pushSubmit() {
    function success(position) {
        // 成功の場合
        var latitude  = position.coords.latitude; // 緯度
        var longitude = position.coords.longitude; // 経度

        document.getElementById('latitude').value = latitude;
        document.getElementById('longitude').value = longitude;

        // 実際にsubmit                              //
        var form = document.getElementById('form'); // <-- ここに移動
        form.submit();                              //
    };
    function error() {
        // エラーの場合
        alert("現在位置を取得できません");
    };

    // 位置情報の取得を試みる
    navigator.geolocation.getCurrentPosition(success, error);
}

上記の様に構文を変更することで、確実に指定の input に値を設定した上で submit されます。
もし、位置情報の取得が失敗した場合も submit したい場合は error() にも submit の構文を記載してください。