百度地图Api进阶教程-点聚合9.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<title>点聚合</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);
map.enableScrollWheelZoom();

var MAX = 10;
var markers = [];
var pt = null;
var i = 0;
for (; 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});

</script>


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
百度地图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> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值