百度地图中的点聚合主要有两个文件一个控制聚合即MarkerClusterer.js,一个控制显示的样子TextIconOverlay.js,这里吐槽一下,官方给的文档并没有说明!!!
http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js(无格式压缩版)
http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js
http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js(无格式压缩版)
http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer.js
先看MarkerClusterer,一般创建聚合时的代码如下.这里的for循环实际上在随机的创建一些经纬度坐标,
var markers = [];
for(i=0; i < 10000; i++) {
pt = new BMap.Point(Math.random() * 5 + 75, Math.random() * 10 + 21);
markers.push(new BMap.Marker(pt));
}
var st = [ { url: "m4.png", size:new BMap.Size(92, 92) } ];
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers,styles:st});
对应到源码部分
/**
*@exports MarkerClusterer as BMapLib.MarkerClusterer
*/
var MarkerClusterer =
/**
* MarkerClusterer
* @class 用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能
* @constructor
* @param {Map} map 地图的一个实例。
* @param {Json Object} options 可选参数,可选项包括:<br />
* markers {Array<Marker>} 要聚合的标记数组<br />

本文分析了百度地图中点聚合功能的MarkerClusterer.js和TextIconOverlay.js源码,讲解了如何创建、清除及自定义聚合样式。 MarkerClusterer.js用于控制聚合,TextIconOverlay.js控制显示。通过BMapLib.MarkerClusterer实例化,传入地图对象和选项,并使用addMarkers方法添加标记。清除聚合点可使用clearMarkers方法。聚合样式可通过styles参数自定义,TextIconOverlay内部会根据点数量显示不同样式。
最低0.47元/天 解锁文章
9825

被折叠的 条评论
为什么被折叠?



