Javascript 为google-maps-api-3制作热图动画

这让我发疯了

我正在使用GoogleMapsAPIv3和热图。我已经成功绘制了数据点，没有问题。但是，我想要一个无限循环的动画。目前，我有以下代码。（将显示地图，但不显示任何数据点。）

var\u data=[]；
pointArray=new google.maps.MVCArray（_数据）；
var heatmap=new google.maps.visualization.HeatmapLayer({
数据：pointArray，
});
热图设置数据（_数据）；
热图.设置图（map）；
play=函数（）{
对于（var j=0；j

---

欢迎任何帮助

问题在于，直到当前执行的脚本暂停，热图数据才会更新。到那时，所有的数据更改都已完成，因此没有任何可设置动画的内容

不幸的是，这意味着过于简单的方法是行不通的。您需要将数据划分为动画步骤，只更改几个数据点，然后使用setTimeout调用链中的下一个步骤，而不是在直接循环中更改数据。这将暂停，以便库有机会实际进行您指定的更改

---

此外，您使用的

setInterval

是不正确的（我相信您在本例中的意思是

setTimeout

）。您在循环中调用

setInterval

，但从未清除它。循环的每次迭代都会导致一个新的定时执行，这样您就不需要太长时间就可以拥有数百个间隔，所有这些间隔都会调用

play

函数<代码>设置超时只会再执行一次。

您可以发布一个链接到您尝试过的内容吗？如果它不在实时web服务器上，请使用JSFiddle。当然：它还需要几天的工作，但已经开始运行了。谢谢你，查德！小提琴似乎不起作用，但似乎已经添加了超时代码，这是否起作用？

var _data = [];
pointArray = new google.maps.MVCArray(_data);
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
});

heatmap.setData(_data);
heatmap.setMap( map );

play = function(){
    for( var j = 0; j < data_arr.length; j++ ){
        pointArray.clear();

        for( var i = 0; i < data_arr[j].length; i++ ){
            pointArray.push( new google.maps.LatLng(data_arr[j][i]['lat'], data_arr[j][i]['lon']) );
        }

        setInterval(function(){
            play();
        }, 3000);
    }
}

google.maps.event.addListenerOnce(map, "idle", function(){
    play();
});