使用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();

DEMO

注意:最好setTimeout与Ajax调用一起使用,因为您不知道获取响应需要多长时间.