Question

我正在使用HeatmapLayer api https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps

我生成这样的热图：

heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    radius: 50
});
heatmap.setMap(google_map);

当我想使用与上面相同的功能显示另一个热图时（我正在使用ajax并且我有新标记要显示，所以我也需要更改热图）热图贴图保留在地图上这种情况我在地图上有2个重叠的热图。我该如何首先删除当前的热门播放器？

这是我的演示代码，如果您点击地图下方的链接，会添加热图，再次点击它，它应该删除它，但它只是一遍又一遍地重复：

http://jsfiddle.net/LpL3P/

Answer 1

文档建议您可以通过调用heatmap.setMap(null)

来删除图层

<强>更新

在your jsfiddle中，您在每个heatmap事件的范围内声明了click变量。为了使您的代码有效，我将heatmap变量全局移动，然后进行检查以确保新的heatmap没有覆盖现有的{。}}。

Here is your updated jsfiddle

Answer 2

对于在原始帖子之后多年寻找解决方案的其他人，我发现以下工作。首先将变量声明为一个包含热图MVCObject的全局变量。

var mvcObj;

然后，在用于添加热图的功能

中

if( typeof( mvcObj )=='object' ) mvcObj.clear();
/* locations is an array of latlngs */
mvcObj = new google.maps.MVCArray( locations );

/* this.map is a reference to the map object */
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: mvcObj,
    map: this.map
});

Answer 3

请查看此处的文档google JSHeatMaps。

查看此example。您可以查看切换按钮的逻辑。

heatmap.setMap(null)

Answer 4

使用heatmap.setMap(null)只会隐藏热图图层。如果您稍后输入heatmap.setMap(map)，您将再次看到热图图层，因此它不会被删除。

要删除数据，您必须执行以下步骤。

heatmap.setMap(null) //这会隐藏热图图层

heatmap.getData().j = []; //这实际上是将coordinates数组设置为零。

heatmap.setMap(map) //现在当您切换回地图时，加热层已经消失，您可以创建一个新的。

希望这会有所帮助。我花了一段时间才弄明白，但它确实奏效了。

Answer 5

您需要全局声明heatmap，然后在要在热图上显示新数据时执行以下操作：

let heatmap;

setData(heatmapData) {
    if (heatmap) {
      // Clear heatmap data
      heatmap.setMap(null);
      heatmap.setData([]);
    }
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData
    });

    heatmap.setMap(this.map);
}

从谷歌地图中删除HeatmapLayer

5 个答案: