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

【问题标题】：HTML5 Geolocation Not Waiting for user InputHTML5 地理位置不等待用户输入
【发布时间】：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");
    }
}

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

【问题讨论】：

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

标签： javascript html geolocation

【解决方案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"); });

【讨论】：