使用JSON每x秒更新一次传单标记位置

Question

我的地图上有一个标记，表示国际空间站的当前位置(取自http://open-notify-api.herokuapp.com/iss-now.json?callback=?)。我还试图让它每隔1秒移动一次，以跟随空间站的轨道。

这是我现在拥有的代码：

$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {                 
               var latitude = data["data"]["iss_position"]["latitude"];
               var longitude = data["data"]["iss_position"]["longitude"];
               var iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
               $(function() {
                 setInterval(function() {
                    iss.setLatLng([latitude,longitude]).update();
                 },1000);
               });
              });

下面是jsFiddle中的所有内容：http://jsfiddle.net/zmkqu/

它似乎在加载时将标记放置在正确的位置，但并不像它应该的那样每秒更新一次。对我做错了什么有什么建议吗？

谢谢!

Answer 1

您应该将整个Ajax调用放在setInterval回调函数中。现在您正在将标记设置到相同的位置，因为data不会改变。你必须每秒钟打一个新的电话：

var iss;

function update_position() {
    $.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
        var latitude = data["iss_position"]["latitude"];
        var longitude = data["iss_position"]["longitude"];
        if (!iss) {
            iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
        }
        iss.setLatLng([latitude,longitude]).update();
        setTimeout(update_position, 1000);
    });
}

update_position();

注意:最好将setTimeout与Ajax调用结合使用，因为您不知道获得响应需要多长时间。

Answer 2

如果你需要保证它每秒更新一次，你可能需要修改一下……现在，它在服务器使用json响应后触发1秒，这很可能不是自上次更新以来的1秒。

你需要的是更像这样的东西：

 var iss
     , timeElapsed = 0;

function update_position() {
    elapsedTime = new Date().getMilliseconds();

    $.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
        var latitude = data["data"]["iss_position"]["latitude"];
        var longitude = data["data"]["iss_position"]["longitude"];

        elapsedTime = new Date().getMilliseconds() - elapsedTime;

        if (!iss) {
            iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
        }
        iss.setLatLng([latitude,longitude]).update();
        setTimeout(update_position, 1000 - elapsedTime);
    });
}

update_position();

你可以用这个走得更远。如果请求花费的时间超过一秒，就会出现一些卡顿现象。例如，如果您的请求花费的时间超过一秒，则会出现卡顿。但是，如果该请求花费的时间超过一秒，您可能还有其他问题需要处理。