ジオロケーションAPI - 位置

Question

を得るのを待つ私は次のユースケースの正しいジオロケーションAPIの使用法であるのだろうか。

私は何らかの形で（携帯電話を対象）のウェブサイトを持っています。ユーザーは何らかのテキストを入力して[Submit]を押します。入力したデータと一緒にユーザーの場所（GPS座標）を記録する必要があります。ユーザーが許可を得ていないか、自分の位置を特定できなかった場合は、警告メッセージが表示されます。

私の観点からは、ジオロケーションAPIが非同期であるという問題があります。したがって、「Submit」を押すと、実行フローは、送信後に通常どおりに動作するメインフローに分離されます。データはデータベースに記録され、非同期フローコールバックはAPIが座標を受け取ったときにのみ実行されます。

function recordPosition(position) { 
    var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 
    //perform POST query to the server to write coordinates to the database 
    } 
    function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(recordPosition); 

    } else { 
     alert("Geolocation is not supported by this browser."); 
    } 
    } 

しかし、このアプローチは、データの記録や位置の記録を分離して、私はワット\ O位置のセーブデータを禁止することはできません：。をonSubmit実行に追加したカスタムのgetLocation JS機能 - 私はいくつかの回避策を実施してきた瞬間のために

私が非同期で初心者になるとすぐに、私はGetCurrentPosition関数のシンクロナイズ版を持っていますが、理想的には間違った解決策に見えます。しかし、この場合、私は何をすべきですか？

Answer 1

はここに、この例をチェックアウト：https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

を基本的にJavaScriptを使用してPOSTを実行している場合 - あなたは何の問題もありません。

HTML：：

JS：私はTISのマニュアル読みました。もちろん、

function onSubmit(){ 
    var iLat = document.getElementById('latitude'); 
    if(!iLat.value){ 
     getLocation(); 
     return false; 
    } 
} 

function recordPosition(position) { 
    var iLat = document.getElementById('latitude'); 
    var iLong = document.getElementById('longitude'); 
    iLat.value = position.coords.latitude; 
    iLong.value = position.coords.longitude; 

    iLat.form.submit(); 
} 

function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(getLocation_success, getLocation_error); 
    } else { 
     alert("Geolocation is not supported by this browser."); 
    } 
} 

function getLocation_success(pos){ 
    showPosition(pos); 
    recordPosition(pos); 
} 

function getLocation_error(err){ 
    console.warn('ERROR(' + err.code + '): ' + err.message); 
}