Google Maps API v3：未删除标记

Question

我正在创建一个基于边界框和缩放级别加载和销毁标记的地图。我在正确删除标记时遇到了一个真正的问题，它似乎有时在某些情况下有效。

我有一个包含标记信息的对象，其中还包含谷歌地图标记对象。我的代码根据边界框或缩放级别检测是否应该删除市场。我将标记对象设置为“setMap(null);”并且使用萤火虫我可以看到它正在被设置，然后我完全删除父对象并且对象数据长度被正确更新。

当一个标记被删除时，我输出到萤火虫控制台，似乎正在工作，我可以看到标记没有从 ajax 调用中重新创建，以便在边界框更改上标记。

然而，如果我放大地图，我有时会看到标记正在被移除，如果我缩小，然后按住鼠标向后平移。或者有时，如果我第一次缩小，标记会全部被删除，但如果我再次放大，那么它们不会被删除。

我的代码逻辑一定有问题，我很难过。

可以查看源码 http://www.trailforks.com/map/test.php?lat=49.352247&lon=-123.202413 JS是 http://www.trailforks.com/map/includes/map.js

删除标记的代码在底部

function clearMarkerMemory(mapItem, i) {
  google.maps.event.removeListener(mapItem.lis);    // remove stored listener

  mapper.data[i].obj.setMap(null); // remove marker
  mapper.data.splice(i, 1);

  console.log("removed marker "+mapItem.icon+":"+mapItem.nid+' '+mapItem.name);
};

我在控制台中添加了更多调试，转到地图的一个简单区域，只有 2 个标记 http://www.trailforks.com/map/test.php?lat=49.43210641783767&lon=-123.49878636730955&z=14

我可以看到创建的标记，然后稍微移动地图并看到标记没有重新创建，因为它们是在标记对象中检测到的。然后我移动视口，使其中一个标记离开屏幕，我可以看到标记已被移除并且标记对象长度更新。但是，如果我将地图平移回上方，标记仍然在地图上。

Answer 1

我很长一段时间都在为类似的问题苦苦挣扎，直到我意识到地图标记的 setMap 方法是异步的。当您调用它并立即删除对该标记对象的任何引用时，浏览器的垃圾收集器会介入并从内存中清理它，从而阻止实际的删除操作发生。

通过在 splice 调用中注释掉该行来尝试一下，看看是否有帮助。如果确实有帮助，您应该考虑延迟删除对象，或者存储对标记对象的引用，直到它真正被删除。如何检测它是否真的被删除？我不知道。

我希望这会有所帮助！

Answer 2

而不是做：

 google.maps.event.addListener(map, 'dragend', function() {  refreshMarkers(); }); //refresh markers when user moves map
 google.maps.event.addListener(map, 'zoom_changed', function() {  refreshMarkers(); }); //refresh markers when user moves map

改成：

编辑，（在 cmets 之后）：

为防止事件处理程序的多个实例同时发生，可以使用全局变量，如下所示：

google.maps.event.addListener(map, 'bounds_changed', function() {  
if (processing) { // var processing is global
    return;
}
processing = true;
refreshMarkers(); 
processing = false;

}); //refresh markers when user moves map

这应该涵盖这两种情况。现在，如果有两个不同的事件侦听器，AJAX 调用可能会发生冲突，您可能会在第一个调用完成之前触发第二个调用。