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

Question

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

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

我的问题是，在提示用户进行位置跟踪之前，该函数返回“undefined”。 有谁知道如何修改此代码，等到用户选择后？ 此外，我似乎无法看到什么是抛出未定义的错误。

Answer 1

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

对于getLocation函数，您要么根本不返回任何内容，要么返回字符串Unknown 。 请注意，从回调function(position){返回结果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"); });