0

这让我发疯...

我正在使用带有热图的谷歌地图 api v3。我已经成功绘制了数据点，那里没有问题。但是，我想要一个无限循环的动画。目前，我有以下代码。（地图出现，但没有任何数据点。）

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

任何帮助，都是最受欢迎的！

4

1 回答 1

2

问题是热图数据在当前执行的脚本暂停之前不会更新。到那时，所有数据都已更改，因此没有任何动画。

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

另外，您的使用setInterval不正确（我相信您的意思是setTimeout在这种情况下）。您正在setInterval循环调用并且永远不会清除它。循环的每次迭代都会导致新的定时执行，因此您很快就会有数百个间隔都调用您的play函数。setTimeout只会再执行一次。

于 2012-11-30T17:35:19.907 回答