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

Posted 2023-02-23

【中文标题】地理位置 API - 等待获取位置

【英文标题】：Geolocation API - wait for getting position

【发布时间】：2016-10-10 14:34:33

【问题描述】：

我只是想知道以下用例的正确 Geolocation API 用法是什么：

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

在我看来，问题在于 Geolocation API 是异步的。因此，在按下“提交”后，执行流程与提交后照常执行的主要流程分离-将数据记录到数据库中，而异步流程-仅在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.");
    
  

但是这种方法将数据记录和位置记录分开，我不能禁止没有位置的数据保存..

一旦我是异步新手，我只想拥有同步版本的 GetCurrentPosition 函数，但这似乎是不可能的\意识形态错误的解决方案。但是在这种情况下我该怎么办呢？

【参考方案1】：

在此处查看此示例：https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/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);

【讨论】：

我当然看过 tis 手册。但似乎您没有发现问题（因为您的示例与我在开始时写的基本相同） - 我有数据表格，我想要坐标并将它们与表格中的数据相关联。我不想将它们分开，我需要它们相互连接。

我想你可能完全错过了我的观点。您不应该尝试 POST 两次。查看我更新的答案，它阻止了第一个 POST，然后等待位置并再次 POST。

是的，更新版本更好，几个小时前我实现了相同的方法。这正是我需要的，谢谢。如果您将 JSFiddle 添加到您的答案中作为说明，那就太好了。但实际上我遇到了另一个问题（可能是特定于 CActiveForm 的 Yii？） - 当我这样做时，文本输入的值正在丢失，如果我只是在 onSubmit 函数中提醒它 - 坐标很好，但用户输入变为空： （有什么想法吗？