地理位置API - 等待獲得位置

我只是想知道什麼是以下使用情況下，正確的地理位置API用法：地理位置API - 等待獲得位置

我有某種形式的網站（針對手機）。用戶輸入一些文本並按「提交」。我需要記錄用戶的位置（GPS座標）以及輸入的數據，並且（重要的！）在用戶未給予許可或我們無法確定他\她的位置時提出一些警告消息。

從我的角度來看問題是Geolocation API是異步的。因此，在按下「Submit」之後，執行流程會在提交之後像往常一樣分離到主流程 - 將數據記錄到數據庫，而異步流程回調僅在API接收座標時執行。

因爲我已經實現了一些解決方法的時刻 - 添加了自定義的getLocation JS功能的onsubmit執行：

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."); 
    } 
    }

但這種方法分離數據記錄和位置記錄，我不能禁止數據保存w^\ o位置。

只要我是異步的新手，我想只要有GetCurrentPosition函數的同步版本，但它似乎是不可能的\思想上錯誤的解決方案。但是，我應該怎麼做呢？

來源

2016-10-10 The Godfather

退房這裏這個例子：https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

基本上，如果你正在使用的JavaScript執行您的文章 - 你有沒有問題。

你可以這樣做：

HTML：

JS：

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); 
}

來源

2016-10-10 14:45:45

當然，我看過那朵手冊。但似乎你沒有發現問題（因爲你的例子基本上和我在開始時寫的一樣） - 我用數據形式表達，並且我想要座標並將它們與表單中的數據關聯起來。我不想分開他們，我需要他們彼此加入。 –

我想你可能完全錯過了我的觀點。你不應該試圖POST兩次。看看我的更新答案，它阻止了第一次POST，然後等待的位置和POSTs了。 –

是的，更新後的版本更好，幾個小時前我實現了相同的方法。這正是我所需要的，謝謝。如果您將JSFiddle添加到您的答案中，那麼這將是一個很好的例子。但實際上我遇到了另一個問題（也許Yii特定於CActiveForm？） - 當我這樣做時，文本輸入的值正在丟失，如果我僅在onSubmit函數中提醒它 - 事件座標正常，但用戶輸入變爲空：（有任何想法嗎？ –

地理位置API - 等待獲得位置

回答

相關問題