使用 markerclusterer 过滤 googlemaps 以仅显示屏幕上可见的标记（在侧边栏上） - 通过 xml 加载的内容答案

【问题标题】：Filtering googlemaps with markerclusterer for displaying only markers visible on the screen (on a sidebar) - contents loaded via xml使用 markerclusterer 过滤 googlemaps 以仅显示屏幕上可见的标记（在侧边栏上） - 通过 xml 加载的内容
【发布时间】：2013-03-09 22:34:22
【问题描述】：

我在http://arquitectospelomundo.com 运行这个网站，这是基于 googlemap 的。感谢这个社区，我已经设法让它从 xml 文件中读取数据，将其处理成一个 markerclusterer 对象，并让它显示一个带有内容的侧边栏。现在我正在寻找是否可以仅使用屏幕上看到的标记过滤该侧边栏（放大会从该列表中删除项目）。由于markerclusterer给我带来了困难，因此已经尝试过但没有成功。任何帮助表示赞赏。谢谢！

【问题讨论】：

有可能，我有例子可以做到，只是没有使用markerclusterer。您的代码是什么样的（您尝试在哪里执行但无法使其工作）？
是的！你和你的优秀教程是在谷歌地图 api 上教了很多东西的东西！包括填充侧边栏，从 xml 加载......我很确定再次使用 geocodezip.com 的示例，我试图做我想做的事，但没有设法让它与集群器一起工作）。感谢您提供的很棒的网站！

标签： google-maps google-maps-api-3 markerclusterer

【解决方案1】：

观察地图的bounds_changed-event，然后遍历标记并检查地图的边界是否包含标记：

google.maps.event.addListener(map,'bounds_changed',function(){
var bounds=map.getBounds();
$('#side_bar a').each(function(i,e){
  $(e).add($(e).next('br'))
    .css('display',(bounds.contains(gmarkers[i].getPosition()))?'block':'none');
});
});

这将过滤侧边栏元素，但lazyload 不会注意到变化。但是你可以通过触发滚动事件来强制lazyload加载图片：

google.maps.event.addListener(map,'bounds_changed',function(){
var bounds=map.getBounds();
$('#side_bar a').each(function(i,e){
  var c=bounds.contains(gmarkers[i].getPosition());
  $(e).add($(e).next('br')).css('display',c?'block':'none')
   .find('img').trigger((c)?'scroll':'void');
});
});

【讨论】：

谢谢，你真的为我指出了正确的方向！这项工作是 CPU 密集型的，任何滚动或平移都会使地图冻结一两秒钟。但是有了这个，我现在可能会实现一个按钮（例如，“显示该区域的建筑师”）。 PS：我将您的代码放在 markerCluster 声明之前（如果我将它放在其他事件侦听器旁边，它会挂起地图）。感谢您的帮助！
你可以用idle代替bounds_changed，这样会减少触发次数
谢谢，这有帮助...仍然可能需要太多的 CPU :/ （我的机器还不错...）但我会看看我能做什么！ :)
我认为添加延迟会有所帮助，使空闲侦听器仅在 1.5 秒后触发。再次感谢！这就是现在的样子（我的本地主机还没有）：google.maps.event.addListener(map, 'idle', (function () { var delay; return function() { clearTimeout(delay); timer = setTimeout(function() { var bounds=map.getBounds(); $('#side_bar a').each(function(i,e) { var c=bounds.contains(gmarkers[i].getPosition()); $(e).add($(e).next('br')).css('display',c?'block':'none') .find('img').trigger((c)?'scroll':'void'); }); }, 1500); } }()));