在Google地图上模拟路线

Question

I have some problems when I want to simulate a route paths on Google map.

• the JavaScript closure issue.
• how to change the setTimeout time interval dynamically.

I have a list of location data, there are different useful properties in lacation object for me to render on the Google maps, like Lat,Lng and Time etc...

I want to create a Google maps Marker every 500ms(*change interval dynamically) to simulate the route paths on the maps, but every time I got the same location data.

here are the JavaScript code:

function playback(data) {
    data = [{ Time: 2010, Lat: 1.36046, Lng: 103.897018 }, { Time: 2011, Lat: 1.352566, Lng: 103.855768 }, { Time: 2012, Lat: 1.349477, Lng: 103.802553}];

    for (i = 0; i < data.length; i++) {
        setTimeout(function () { printlocation(data[i]); }, i * 500);
    }
}

function printlocation(cur) {
    alert(cur.Time);
}

When the code runs, it prints out 2012 for 3 times.

after research, it probably because of the JavaScript closure , but I don't really understand how it works. I want to find a pattern to solve my 2 problems. thanks in advanced.

Answer 1

Untested:

// Global variable
    var dataArray = [{ Time: 2010, Lat: 1.36046, Lng: 103.897018 }, { Time: 2011, Lat: 1.352566, Lng: 103.855768 }, { Time: 2012, Lat: 1.349477, Lng: 103.802553}];

        function playback() {
            for (i = 0; i < dataArray.length; i++) {
                var data = getData(i);
                setTimeout(function () { printlocation(data); }, i * 500);
            }
        }


            function getData(ix) {
                return dataArray[ix];
            }