javascript - HTML5 地理定位不等待用户输入

Question

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

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

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

Answer 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 Promise，要么使用广泛使用的库，如 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"); });