2

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.

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/

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!

4

2 に答える 2

9

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

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 setTimeout together with Ajax calls, since you don't know how a long it takes to get the response.

于 2013-01-22T20:01:44.120 に答える
0

毎秒更新されることを保証する必要がある場合は、おそらくこれを少し変更する必要があります...現在、サーバーが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();

これでさらに先に進むことができます...たとえば、リクエストに1秒以上かかる場合など、リクエストに1秒以上かかる場合は吃音が発生します。ただし、そのリクエストに1秒以上かかる場合は、対処する必要のある他の問題が発生している可能性があります。

于 2013-01-22T23:36:18.603 に答える