Question

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

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

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

Answer 1

Promises是解决此类问题的简单答案。 navigator.geolocation.getCurrentPosition是一个异步调用 - 这意味着您调用该方法并向其传递回调函数，每当检索到该位置时，将使用结果值（位置）调用您的回调函数。根据您正在呼叫的异步功能，可能需要1ms才能调用您的回调函数或1小时，所有您知道的是，只要值可用，它就会＆＃34;通知＆＃34;你。

如果是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（我最喜欢的）。使用promises，代码看起来像这样:(我建议你读一下它，因为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"); });

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

1 个答案: