度娘万岁，聚合就是聚集，JS SDK有点坑

2023-08-29 05:47:01

百度地图 MarkerClusterer 坑位大揭秘

导语

各位地图绘制达人，有没有遇到过这样的难题：在地图上标记了一大堆数据点，结果整个地图密密麻麻一片，点与点之间重叠严重，不仅影响美观，还让用户难以分辨关键信息。别着急，百度地图的 MarkerClusterer 函数应运而生，它可以将多个数据点聚合在一起，让你的地图看起来更整洁、更易读。不过，在使用 MarkerClusterer 函数时，也有一些坑位需要留意，踩坑可不是什么好体验。

坑位 1：gridSize 属性是必填项，别忘了！

gridSize 属性是 MarkerClusterer 函数的必填属性，它决定了聚合后标记的大小。如果你把 gridSize 设置得太小，聚合后的标记会变得很小，在地图上很难看清。相反，如果你把 gridSize 设置得太大了，聚合后的标记又会变得很大，地图上就出现了一大堆模糊不清的标记，影响美观。所以，一定要根据实际情况设置合适的 gridSize 值。

坑位 2：maxZoom 属性同样是必填项，千万别遗漏！

maxZoom 属性也是 MarkerClusterer 函数的必填属性，它决定了聚合后的标记在哪个级别以上不再聚合。如果你把 maxZoom 设置得太大了，聚合后的标记会一直聚合到地图最顶层，地图上就只剩下一大堆聚合标记，根本看不到具体的点。相反，如果你把 maxZoom 设置得太小了，聚合后的标记就聚合得不够彻底，地图上还是会出现许多零散的数据点。因此，一定要根据实际情况设置合适的 maxZoom 值。

坑位 3：聚合的标记必须位于同一图层上

MarkerClusterer 函数只能对同一个图层上的标记进行聚合。如果你把数据点放在不同的图层上，那么就无法聚合这些数据点。所以在使用 MarkerClusterer 函数之前，请确保所有的数据点都位于同一图层上。

解决方案

了解了这些坑位之后，就可以针对性地解决问题了。首先，gridSize 和 maxZoom 属性是必填项，千万别忘了设置。其次，聚合的标记必须位于同一图层上。最后，根据实际情况设置合理的 gridSize 和 maxZoom 值。

代码示例

// 创建一个 MarkerClusterer 对象
var markerClusterer = new BMapLib.MarkerClusterer(map, {
  gridSize: 100, // 设置网格大小为 100px
  maxZoom: 15 // 设置聚合标记的最大缩放级别为 15
});

// 将标记添加到聚合器中
var marker1 = new BMap.Marker(new BMap.Point(116.404, 39.915));
markerClusterer.addMarker(marker1);

var marker2 = new BMap.Marker(new BMap.Point(116.405, 39.916));
markerClusterer.addMarker(marker2);

// ...

常见问题解答

为什么我设置了 gridSize 和 maxZoom 属性，聚合后的标记还是不理想？
答：可能你的 gridSize 和 maxZoom 值设置不合理，请根据实际情况调整这两个值。
为什么我明明把数据点放在同一图层上了，还是无法聚合？
答：请检查你的图层是否真的同一图层，可以尝试使用浏览器控制台输出图层信息进行核实。
为什么聚合后的标记显示不出来？
答：可能是地图的缩放级别太小，导致聚合后的标记不显示。请尝试放大地图。
为什么聚合后的标记太小或者太大？
答：调整 gridSize 值可以控制聚合后标记的大小。
为什么聚合后的标记重叠在一起？
答：这可能是因为聚合后的标记数量太多，导致重叠。可以尝试调整 gridSize 和 maxZoom 值。