百度地图JavaScript API GL如何添加点聚合
时间: 2023-08-15 13:03:43 浏览: 657
百度地图JavaScript API GL提供了一个MarkerClusterer类,可以用于点聚合,具体步骤如下:
1.引入MarkerClusterer库文件
在HTML文件的head标签中添加如下代码:
```html
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
```
2.创建MarkerClusterer对象
```javascript
var markerClusterer = new BMapLib.MarkerClusterer(map, options);
```
其中,map是百度地图实例,options为MarkerClusterer的配置项,包括以下属性:
- markers:要进行聚合的标记数组
- girdSize:聚合计算时网格的像素大小,默认60
- maxZoom:最大的聚合级别,大于该级别就不进行聚合操作,默认18
- minClusterSize:最小的聚合数量,小于该数量的点不进行聚合操作,默认2
- styles:自定义聚合后图标的样式数组
3.将标记添加到MarkerClusterer中
```javascript
markerClusterer.addMarkers(markers);
```
其中,markers为标记数组。
完整示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图JavaScript API GL点聚合示例</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
<script type="text/javascript">
// 初始化地图
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 创建标记数组
var markers = [];
for (var i = 0; i < 100; i++) {
var point = new BMap.Point(Math.random() * 0.1 + 116.3, Math.random() * 0.1 + 39.9);
var marker = new BMap.Marker(point);
markers.push(marker);
}
// 创建MarkerClusterer对象
var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });
// 添加标记到MarkerClusterer中
markerClusterer.addMarkers(markers);
</script>
</body>
</html>
```
阅读全文