简介：调用百度API实现标注点的聚合：
learn-anything | 2018年12月24日10:01:09
【调用百度API实现标注点的聚合】
- 新建.html为后缀的文件，复制下面代码到新建的文件中；
- 用浏览器打开此新建的HTML文件，即可看到效果；
<!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>
- 参考链接：
网友评论