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"); });