Javascript 缩放和动画谷歌地图热图和即时变化与滑块

请看下面的内容——您可能还想看看这篇文章，以了解我试图获得的功能的线索

我想创建一个动态/动画热图，我愿意接受建议。也就是说，可以根据滑块更改其数据集的热图（最终，我可能希望添加一个“播放”按钮来设置动画）。我已经使用GoogleMapsV3JavaScriptAPI启动了这个过程。我有几个问题/顾虑：

我怀疑是否能将所有数据加载到单独的数组中，比如-，每个数组大约有20个数据集，每个数据集有300000多个点，我认为这不会扩展吗？这是否应该应用到JSON和某种类型的AJAX中

pointArray  = new google.maps.MVCArray(taxiData);
pointArray2 = new google.maps.MVCArray(taxiData2);
pointArray3 = new google.maps.MVCArray(taxiData3);

var inputYear = $('#input-year');

inputYear.change(function() {
  var year = $(this).val() * 1;
  if (year == 1) {
    heatmap.setData(pointArray);
  } else if (year == 2) {
    heatmap.setData(pointArray2);
  } else {
    heatmap.setData(pointArray3);
  }
})

为什么我的更改事件不在更改半径的滑块上立即触发？也就是说，在我释放鼠标点击之前，热图的半径不会改变

var radiusSlider = $('#radius-slider');

radiusSlider.change(function() {
  heatmap.set('radius', radiusSlider.val()*1);
})

也许这不是个好办法？我在上看到了很好的示例，但我不确定这些示例是否可以通过热图功能进行扩展，也不确定是否给出了任何源代码示例。这应该/可以是运动图表吗？其他方法（即AngularJS）

---

非常感谢您的帮助和指导。

我考虑过的其他一些想法是将热图输出渲染为静态图像或geojson，但我不确定这是否可行？另外，我将失去很多交互性，因为人们将无法再缩放和/或更改半径？