jquery - 从谷歌地图中删除 HeatmapLayer

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/

score 12 · Accepted Answer

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

更新

在您的 jsfiddle中，您在每个事件heatmap的范围内声明了您的变量。click为了使您的代码正常工作，我将heatmap变量移动到全局存在，然后检查以确保新变量heatmap没有覆盖现有变量。

这是您更新的 jsfiddle

score 5 · Accepted Answer

对于在原始帖子数年后寻找解决方案的其他人，我发现以下方法有效。首先将变量声明为将保存热图 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
});

score 3 · Accepted Answer

您需要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);
}

score 2 · Accepted Answer

使用heatmap.setMap(null)只会隐藏您的热图图层。如果您稍后键入heatmap.setMap(map)，您将再次看到您的热图图层，因此它并没有真正被删除。

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

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

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

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

希望这可以帮助。我花了一段时间才弄清楚，但它确实有效。

score 1 · Accepted Answer

看看这里的文档google JSHeatMaps。

看看这个例子。您可以查看切换按钮的逻辑。

heatmap.setMap(null)

jquery - 从谷歌地图中删除 HeatmapLayer

5 回答 5

Related

Reference