我有一张地图,根据数据库中的值以编程方式放置标记。单击标记时,它将转到该位置的详细信息页面。
我的问题是,当地图被充分缩小时,彼此足够接近的标记显示为单个标记,实际上隐藏了一些标记。 有没有办法以编程方式告诉标记是一组标记的一部分还是被其他标记隐藏/掩盖?
我的意图是为每个动态生成的标记执行类似的操作:
marker.addListener('click', function() {
// if marker is not hiding any other markers
window.location.href = markerURL;
// else if it is hiding markers/is part of a group of markers
map.setZoom(15);
map.setCenter(marker.getPosition());
});
我检查了Marker API documentation,但似乎找不到任何有用的方法。无论标记是否被另一个标记覆盖,getClickable
和getVisible
始终会返回true
。有什么建议?谢谢!
答案 0 :(得分:1)
我最终选择了MarkerClusterer来解决我的问题。我希望有一个更简单的解决方案,但事实证明这很简单。
我需要添加到现有标记生成代码的唯一内容是列表:var markers = [];
,然后我在所有标记上调用markers.push(marker);
。最后一步是创建一个新的MarkerClusterer
对象:
var markerCluster = new MarkerClusterer(map, markers, options);
MarkerClusterer或多或少处理其余部分(options
参数是可选的,但我用它来设置我的图像的路径并设置最大缩放级别)。现在,在之前我的标记堆叠在一起的情况下,使得无法在某些缩放级别上看到或单击某些标记,我改为看到一个簇,其中的数字表示该簇中的标记数。单击群集图标将进一步放大,显示我的标记。
所有这些都是在他们的github页面上的simple usage example之后完成的,但他们也有pretty good documentation。我的大部分时间都让这个工作正常工作实际上花了样式集群图标来匹配我的网站的配色方案......