HTML5 地理位置不等待用户输入

Posted 2023-02-23

【中文标题】HTML5 地理位置不等待用户输入

【英文标题】：HTML5 Geolocation Not Waiting for user Input

【发布时间】：2016-01-06 20:38:30

【问题描述】：

我正在尝试创建一个 Web 应用程序，它会提示用户允许使用他的位置。我正在使用以下功能。

function getLocation() 
    if (navigator.geolocation) 
        navigator.geolocation.getCurrentPosition(
            function(position)
                return("@" + position.coords.latitude + "," + position.coords.longitude);
            
        );
     else 
        return("Unknown");
    

我的问题是该函数在提示用户允许位置跟踪之前返回“未定义”。有谁知道我如何修改此代码以等到用户选择之后？此外，我似乎看不到是什么引发了未定义的错误。

【问题讨论】：

你不能从回调中返回，你需要做你需要回调内部坐标的事情。

【参考方案1】：

Promises 是此类问题的简单答案。 navigator.geolocation.getCurrentPosition 是一个异步调用 - 这意味着您调用该方法并向其传递一个回调函数，每当检索到位置时，将使用结果值（位置）调用您的回调函数。根据您调用的异步函数，调用回调函数可能需要 1 毫秒或 1 小时，您所知道的是，只要该值可用，它就会“通知”您。

对于您的getLocation 函数，您要么不返回任何内容，要么返回字符串Unknown。请注意，从回调 function(position) 返回结果与返回 getLocation 无关。一个非常简单的解决方案（不使用 Promises）是简单地给你的 getLocation 函数一个回调，所以它看起来像这样：

function getLocation(callback) 
    if (navigator.geolocation) 
        navigator.geolocation.getCurrentPosition(
            function(position)
                callback("@" + position.coords.latitude + "," + position.coords.longitude)
            
        );
     else 
      return "Unknown";
    


getLocation(function(res)  /* do something with the result */ );

正如我之前提到的，解决此问题的另一种方法是使用Promises。要么使用原生 ES6 承诺，要么选择像 Bluebird（我最喜欢的）这样广泛使用的库。使用 Promise，代码看起来像这样：（我建议你阅读一下它，因为 javascript 都是关于异步方法的，所以你应该很好地掌握这些问题）

function getLocation(callback) 
    var promise = new Promise(function(resolve, reject) 
        if (navigator.geolocation) 
            navigator.geolocation.getCurrentPosition(
                function(position)
                    resolve("@" + position.coords.latitude + "," + position.coords.longitude)
                
            );
         else 
          reject("Unknown");
        
    );

    return promise;


var locationPromise = getLocation();
locationPromise
      .then(function(loc)  console.log(loc); )
      .catch(function(err)  console.log("No location"); );