AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI 3.0 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI 3.0 documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
简介

您常常需要在地图上展示非常多的点。当地图可视范围内的点越多,点与点的图标堆叠、覆盖的效果就会越严重。为了保证展示效果,本节介绍如何使用点聚合功能,聚合区域内的点,使得可以自适应地图的比例尺进行数据展示。

提供的点聚合工具
  • MarkerClusterer:多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢,且产生覆盖现象的问题。详情可见开源库

点聚合过程
1. 在页面的头部应用点聚合工具开源库的文件
<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
2. 在代码中添加Marker,实例化点聚合
var MAX = 10;
var markers = [];
var pt = null;
for (var i = 0; i < MAX; i++) {
pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
markers.push(new BMap.Marker(pt));
}
// 最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
var markerClusterer =new BMapLib.MarkerClusterer(map, { markers: markers });

上一篇

鼠标绘制

下一篇

Web API
本篇文章对您是否有帮助?