时候是我们需要在地图上添加覆盖物，但如果数据太多可能出现这种情况
这种看起来总觉得不舒服（密集恐惧症）
所以可以换成用聚合点
一下子清爽了很多，聚合点放大后还是可以显示普通点。
用法代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/pages/jsp/mapset/heatmap/css/DrawingManager_min.css" />
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/pages/jsp/area/js/baidu/MarkerTool_min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/pages/jsp/mapset/heatmap/heatmap_js/DrawingManager_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<script src="<%=request.getContextPath()%>/pages/js/distanceTool.js" type="text/javascript" charset="utf-8"></script>
<!--引入聚合点文件-->
<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>
</head>
<body>
<div id="map" style="width:800px;height:500px;"></div>
<script>
var map = new BMap.Map('map');
var poi = new BMap.Point(112.53, 37.87);
map.enableScrollWheelZoom();
map.centerAndZoom(poi, 12);
//添加比例尺
map.addControl(new BMap.ScaleControl());
//初始化打点数据
var markers=[];
//初始化点聚合
var markerClusterer=new BMapLib.MarkerClusterer(map, {markers:markers});
//每次拖动屏幕，重新获取聚合点
map.addEventListener("dragend",function(){
var zoom=map.getZoom();
console.log(zoom)
if(zoom>17){
//获取屏幕边界及四个点坐标
var bound=map.getBounds();
var minLat=bound.Xd;
var maxLat=bound.Vd;
var minLng=bound.Le;
var maxLng=bound.He;
var def=''+minLng+','+maxLat+','+maxLng+','+minLat+','+maxLng+','+maxLat+','+minLng+','+maxLat+','+minLng+','+maxLat+'';
//此处用的后台接口，用于获取打点数据
getStationsInPolygon(def,maxLng, minLng, maxLat, minLat)
}
});
function getStationsInPolygon(areaDef, maxLng, minLng, maxLat, minLat) {
$.ajax({
url : '/floating/resource/selectDataPromote', // 请求连接
type : "post", // 请求类型
data : {
"interfaceName" : "getStationsInPolygonNew",
"areaDef" : areaDef,
"maxLng" : maxLng,
"minLng" : minLng,
"maxLat" : maxLat,
"minLat" : minLat
}, // post时请求体
dataType : 'json', // 返回请求的类型，有text/json两种
async : false, // 是否异步
success : function(data) {
if (data.success) {
//清除以前的点
markerClusterer.clearMarkers(markers);
//清除数组的数据
markers=[];
console.log(markers)
//添加数据
for (var i=0; i<data.data.length; i++) {
var point = new BMap.Point(data.data[i].lacLong, data.data[i].lacLat);
var marker = new BMap.Marker(point); // 创建标注
markers.push(marker)
}
//添加聚合点
markerClusterer.addMarkers(markers)
console.log(markerClusterer)
} else {
alert("获取基站信息失败！");
}
} // 请求成功回调函数
});
}
//一键清除
function clearAll() {
//清除覆盖物
map.clearOverlays();
//清除聚合点
markerClusterer.clearMarkers(markers);
}
</script>
</body>
</html>总之就是初始化 var markerClusterer=new BMapLib.MarkerClusterer(map, {markers:markers});
每次获取数据后清空markers数组再添加新数据，可以先清空原覆盖物 markerClusterer.clearMarkers(markers),
或者markerClusterer.clearMarkers()，markers不需要写，因为初始化时就已经绑定数组了;
添加聚合点覆盖物 markerClusterer.addMarkers(markers)
就是这么简单。
注意：
清空覆盖物不能单纯使用 map.clearOverlays()，这样只能清除普通的点。而对于聚合点而言，只是暂时消失，鼠标一拖动或者放大缩小就又出现了。
要用 markerClusterer.clearMarkers() 的方法才能真正清除
注意var markerClusterer=new BMapLib.MarkerClusterer(map, {markers:markers}) 只需要在全局中初始化一次
以后每次改变聚合点图时只需要改变数组，清除聚合点，再重新画点就可以 markerClusterer.addMarkers(markers)
4833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
