百度地图聚合点new BMapLib.MarkerClusterer（）用法及map.clearOverlays()不能清除聚合点问题

最新推荐文章于 2024-01-30 14:17:41 发布

Sunny小太阳

最新推荐文章于 2024-01-30 14:17:41 发布

阅读量3.2k

点赞数

原文链接：https://blog.csdn.net/lianzhang861/article/details/81387293

版权

时候是我们需要在地图上添加覆盖物，但如果数据太多可能出现这种情况

这种看起来总觉得不舒服（密集恐惧症）

所以可以换成用聚合点

一下子清爽了很多，聚合点放大后还是可以显示普通点。

用法代码

<!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)

原文地址:https://blog.csdn.net/lianzhang861/article/details/81387293

Sunny小太阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图聚合点new BMapLib.MarkerClusterer（）用法及map.clearOverlays()不能清除聚合点问题

时候是我们需要在地图上添加覆盖物，但如果数据太多可能出现这种情况这种看起来总觉得不舒服（密集恐惧症）所以可以换成用聚合点一下子清爽了很多，聚合点放大后还是可以显示普通点。用法代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel=".
复制链接

扫一扫