Question

我想在对象中保存纬度和经度。当我使用第一个console.log时，它也向我显示纬度和经度。

当我尝试保存变量并在函数之后使用console.log时它什么都没有显示。

什么错了？我读到的是异步编程，但我不明白。

$(document).ready(function(){
var userPosition = 
{
    lat: '',
    lon: ''
};

    if(navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(function(position){
                userPosition.lat = position.coords.latitude;
                userPosition.lon = position.coords.longitude;
                console.log(userPosition.lat); //This shows me the latitude
            });
        }
        else
        {
            alert("Geolocation not supported by your browser");
        }

console.log(userPosition.lat);      // This not works

});

Answer 1

请遵循此代码。

$(document).ready(function(){
        var userPosition = 
        {
        lat: '',
        lon: ''};
        if(navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(function(position){
                    userPosition.lat = position.coords.latitude;
                    userPosition.lon = position.coords.longitude;
                    console.log(userPosition.lat); //This shows me the latitude

                });
            }
            else
            {
                alert("Geolocation not supported by your browser");
            }
            setTimeout(function () {console.log('Updated::::'+userPosition.lat);},2500);
    });

不推荐使用setTimeout选项。（仅用于测试目的。）

这里你没有获得console.log('Updated::::'+userPosition.lat);的lat值这是因为navigator.geolocation将花费很少的时间来获取数据，因此你需要输入 setTimeout 或者在获得lat和lng值后从if部分调用函数。

更好的选择是获取值后的调用函数。

优先使用方式如下：

if(navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(function(position){
                    userPosition.lat = position.coords.latitude;
                    userPosition.lon = position.coords.longitude;
                    console.log(userPosition.lat); //This shows me the latitude
                    Displaylat_lng(userPosition.lat,userPosition.lon);

                });
            }

function Displaylat_lng(lat,lng){
            console.log('Lat ==> '+lat + ' lng ==> '+lng);
    }

Answer 2

是的，这是因为函数navigator.geolocation.getCurrentPosition是异步的。

这意味着在您的情况下，主代码立即运行。 navigator.geolocation.getCurrentPosition传递匿名函数，然后立即调用第二个console.log。

navigator.geolocation.getCurrentPosition需要一些时间让GPS做出反应，然后只有第一个console.log被称为匿名函数。

您有几种解决方案：

- put all you need to do with the location inside the callback function 
- put all you need to do with the location into a separate function and call it inside the callback 
- use promises. I recommend though that you understand the callback way thoroughly, before you try out promises. While the latter gives you clearer code, the concept is more difficult to grasp. 
- setTimeout : not recommended. Disadvantage : you don't know the it takes to get the current position.

Answer 3

这是因为navigator.geolocation.getCurrentPosition()调用及其相关的回调是异步发生的。 getCurrentPosition()运行，但您传递给它的函数仅在getCurrentPosition()执行后调用它。 getCurrentPosition()之后的下一条指令是console.log(userPosition.lat);，但userPosition.lat仍为''，因为尚未调用异步函数。

使用Promise，如果需要，可以something like this执行：

HTML

<div id="output"></div>
<div id="error"></div>
<button id="get-position">Get position</button>

JS

$(document).ready(function() {
  $('#get-position').on('click', getLocation);
  function getLocation(event) {
    try {
      const positionPromise = new Promise((resolve, reject) => {
        if ("geolocation" in navigator) {
          navigator.geolocation.getCurrentPosition(
            position => {
              resolve({
                lat: position.coords.latitude,
                lon: position.coords.longitude
              });
            },
            err => { reject(err); }
          );
        }
        else {
          reject("Geolocation not supported by your browser");
        }
      })
      .then(function(userPosition) {
        $('#error').empty();
        $('#output').html(`${userPosition.lat} x ${userPosition.lon}`); 
      }, errorHandler);
    } catch (err) {
      errorHandler(err);
    }
  }

  function errorHandler(err) {
    $('#output').empty();
    $('#error').html(err);
  }
});

Answer 4

使用以下方法

  $(document).ready(function(){
            var userPosition = 
            {
            lat: '',
            lon: ''};
            if(navigator.geolocation)
                {
                    navigator.geolocation.getCurrentPosition(function(position){
                        userPosition.lat = position.coords.latitude;
                        userPosition.lon = position.coords.longitude;
                        console.log(userPosition.lat); //This shows me the latitude 
                        foo(userPosition); // pass the resultant object to function for further processing

                    });
                }
                else
                {
                    alert("Geolocation not supported by your browser");
                }

        })

function foo(locationObj){
  // do rest of the coding for usage of latitude and longitude
}

将纬度和经度保存在对象中

4 个答案: