Google Maps API v3：未删除标记

Posted 2023-03-28

【中文标题】Google Maps API v3：未删除标记

【英文标题】：Google Maps API v3: Markers not being removed

【发布时间】：2012-07-20 06:03:53

【问题描述】：

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

我有一个包含标记信息的对象，其中还包含谷歌地图标记对象。我的代码根据边界框或缩放级别检测是否应该删除市场。我将标记对象设置为“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

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

【问题讨论】：

如果确实存在错误，我很难重现“错误”。看看你的代码，它写得很好，AFAICS 你做对了。没关系，但是您是否尝试过将整个 data[i] 对象设置为 null，然后再将其拼接到数组之外？

+1 表示写得很好、很聪明的问题，顺便说一句...

复制 goto 这个观点trailforks.com/map/… 然后点击拖动鼠标，使左侧的所有黄色标记都离开屏幕。然后按住鼠标将地图拖回那个方向，所以标记的ajax调用还没有触发，你会看到所有的标记都被删除了。但是然后放大一次然后再试一次，它很可能会被破坏，标记现在将保持 100% 的时间。即使它们已从 mapper.data 对象中删除。

我尝试添加“mapper.data[i] = null;”但没有效果。

我仍然没有弄清楚为什么会发生这种情况或其他解决方法。

【参考方案1】：

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

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

我希望这会有所帮助！

【参考方案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 调用可能会发生冲突，您可能会在第一个调用完成之前触发第二个调用。

【讨论】：

使用“bounds_changed”的问题是它开始为鼠标的每一个小动作调用一个 ajax 调用，当用户放开鼠标时，这可能等于数百个，“dragend ”。但无论如何我已经尝试过了，问题仍然存在，如果我平移加载一个标记然后缩小，即使使用单个听众也不会删除任何标记。我还测试了仅启用 dragend 或 zoom_changed。

这很容易通过一个全局变量来防止，该变量指示正在处理一个事件。 （请参阅我的回复的编辑）。

上面的代码仍然不起作用，它似乎从来都不是真的，而且我在萤火虫控制台中听到一个中止 POST 的音调，地图超级滞后。最好只有一个侦听器，但我相当确定我的标记不删除问题与拥有多个侦听器无关，因为我可以只启用 1 个侦听器来解决问题。