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

Updating Leaflet Marker Position Every x Seconds with JSON

提问by Febrium

I have a marker on my map representing the current location of the International Space Station (pulled from http://open-notify-api.herokuapp.com/iss-now.json?callback=?). I'm also trying to get it to move every 1 second to follow along with the station's orbit.

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

This is the code I have now:

这是我现在的代码：

$.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);
               });
              });

Here's everything in a jsFiddle: http://jsfiddle.net/zmkqu/

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

It seems to place the marker in the correct position on load, but does not update every second as it should be. Any tips on what I'm doing wrong?

它似乎在加载时将标记放置在正确的位置，但不会像应有的那样每秒钟更新一次。关于我做错了什么的任何提示？

Thanks!

谢谢！

回答by Felix Kling

You should put the whole Ajax call inside the setIntervalcallback. Right now you are setting the marker to the same position very second, because datadoes not change. You have to make a new call every second:

您应该将整个 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

演示

Note: It's better to use setTimeouttogether with Ajax calls, since you don't know how a long it takes to get the response.

注意：最好setTimeout与 Ajax 调用一起使用，因为您不知道需要多长时间才能获得响应。

回答by Daniel Sellers

If you need to guarantee that it updates every second you probably want to modify this a bit... Right now it fires 1 second after the server responds with the json, which is most likely not 1 second since the last update.

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

What you want is something more like this:

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

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

You could probably go even farther with this... there will be some stuttering if a request takes more then a second for instance if your request takes longer then a second. But if that request is taking longer then a second you probably have other issues you need to deal with.

你可能会走得更远……如果一个请求花费的时间超过一秒，例如如果你的请求花费的时间超过一秒，就会有一些口吃。但是，如果该请求需要更长的时间，那么您可能还有其他需要处理的问题。