Javascript 地理定位API-等待获取位置

我只是想知道对于以下用例，地理定位API的正确用法是什么：

我有一些形式的网站（针对手机）。用户输入一些文本并按“提交”。我需要记录用户的位置（GPS坐标）和输入的数据，如果用户未给予许可或我们无法确定他/她的位置，我需要（重要！）发出一些警告消息

在我看来，问题在于地理定位API是异步的。因此，在按下“提交”后，执行流与主流分离，在将数据提交-记录到数据库后，执行流与主流一样，异步流回调仅在API收到坐标时执行

目前，我已经实现了一些变通方法—在onSubmit执行中添加了自定义getLocation JS函数：

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

但这种方法将数据记录和位置记录分开，我不能禁止数据保存（不带位置）

---

一旦我是async的新手，我就想要同步版本的GetCurrentPosition函数，但这似乎是不可能的\从思想上讲是错误的解决方案。但是在这种情况下，我应该怎么做呢？

请查看下面的示例：

基本上，如果您使用JavaScript执行POST，那么您不会有任何问题

您可以执行以下操作：

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

---

请在此处查看此示例：

基本上，如果您使用JavaScript执行POST，那么您不会有任何问题

您可以执行以下操作：

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

---

我当然读过这本手册。但是你似乎没有发现问题（因为你的例子基本上和我在开头写的一样）-我有一个带有数据的表单，我想有坐标，并将它们与表单中的数据相关联。我不想把它们分开，我需要它们彼此连接起来。我想你可能完全没有领会我的意思。你不应该试图发布两次。查看我更新的答案，它阻止了第一篇文章，然后等待该职位并再次发布。是的，更新的版本更好，几小时前我实现了相同的方法。这正是我需要的，谢谢。如果您将JSFIDLE添加到您的答案中作为一个示例，这将非常好。但事实上，我面临另一个问题（可能是特定于CActiveForm的Yii？）-当我这样做时，文本输入的值正在丢失，如果我在onSubmit函数中提醒它-坐标很好，但用户输入变为空：（有什么想法吗？我当然读过这本手册。但似乎你没有发现问题（因为你的例子基本上和我一开始写的一样）-我有表格和数据，我想有坐标，并将它们与表格中的数据相关联。我不想将它们分开，我需要它们相互连接。我想你可能完全误解了我的观点。你不应该尝试发布两次。查看我更新的答案，它阻止了第一次发布，然后等待位置和时间再次发布。是的，更新后的版本更好，几小时前我实现了相同的方法。这正是我需要的，谢谢。如果您在答案中添加JSFIDLE作为一个示例，那将是非常好的。但实际上我面临另一个问题（可能是针对CActiveForm的Yii特定问题？）-当我这样做时，文本输入的值丢失，如果我只是在onSubmit函数中提醒它-坐标可以，但用户输入变为空：（有什么想法吗？