javascript - 在 Google map 上模拟路线

Question

当我想在 Google map 上模拟路线路径时遇到一些问题。

• JavaScript 闭包问题。
• 如何动态更改 setTimeout 时间间隔。

我有一个位置数据列表，位置对象中有不同的有用属性可供我在 Google map 上呈现，例如纬度、经度和时间等...

我想每 500 毫秒创建一个 Google map 标记(*动态更改间隔)来模拟 map 上的路线路径，但每次我都获得相同的位置数据。

这里是 JavaScript 代码:

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

代码运行时，会打印 3 次 2012。

经过研究，这可能是因为 JavaScript closure，但我不太明白它是如何工作的。我想找到一种模式来解决我的两个问题。提前致谢。

Answer 1

未经测试:

// 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];
            }