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

Question

这让我抓狂......

我正在使用谷歌地图 API v3 和热图。我已成功绘制数据点，没有任何问题。但是，我想要一个无限循环的动画。目前，我有以下代码。 ( map 出现，但没有任何数据点。)

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

非常欢迎任何帮助!

Answer 1

问题在于，直到当前执行的脚本暂停后，热图数据才会更新。到那时，所有数据都已更改，因此无需设置动画。

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

此外，您对 setInterval 的使用不正确(我相信您在本例中指的是 setTimeout)。您在循环中调用 setInterval 并且从未清除它。循环的每次迭代都会导致一次新的定时执行，因此您很快就会有数百个时间间隔全部调用您的 play 函数。 setTimeout只会再执行一次。