Agm-Core + Google Maps热图-非常慢的页面

Question

所以问题在于，我需要在屏幕上进行很多操作，而一旦我打开google热图，整个页面就会变得非常慢。

我有一个Google地图，带有大约200个标记，这些标记会自动更新。每个标记都从服务器接收更新套接字事件并自行更新。该地图在更新200个标记后反应非常灵敏，我可以四处移动并进行交互（这有点滞后，但是我要说的是对标记和请求的数量确实有反应）。

打开Goog​​le热图时会出现此问题。加载热图大约需要2秒钟，然后，如果我要放大/缩小或移动地图，则大约需要4到5秒钟来完成操作。

所以现在是热图创建代码

            const coords = [{
              weight: 1,
              location: new google.maps.LatLng(heatmapMarker.container_latitude, heatmapMarker.container_longitude)
            }];

            const heatmap = new google.maps.visualization.HeatmapLayer({
              map: this.google_map,
              data: coords,
              radius: 20
            });

            heatmap.set('gradient', heatmapMarker.gradient);

            this.assignedHeatmaps.push({ marker: heatmapMarker.id, map: heatmap, data: heatmapMarker.data });

因此，总的来说，如果我添加1个热图图层或添加10个热图图层（在所有场景中）并没有什么不同，那么一旦将热图添加到地图中，它的速度就会变慢。

我不确定从哪里开始调试代码...

有什么建议吗？

我希望的结果是，在启用热图之后，热图将运行得更快，并且不需要花费几秒钟来完成操作。