将经纬度保存在对象中

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);的纬度值 这是因为 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

使用下面的方法

  $(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
}

Answer 3

是的，这是因为函数 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 4

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

使用 Promises，如果需要，可以使用 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);
  }
});