百度地图聚合物和覆盖物

先说一下需求吧，类似做一个搜房网地图显示区域有多少个房产，地图放大后显示具体房产。


第一步肯定就是先要初始化地图

// 初始化地图
var map = new BMap.Map("allmap");    // 创建实例
 // 设置中心点和地图级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 
map.setCurrentCity("北京");          // 设置地图显示城市
map.enableScrollWheelZoom(true);     //开启滚轮缩放

 第二步就是显示聚合物

如果按照百度地图api提供的聚合物，放大后可能会分成几个小的聚合物，这样不太好，最后放大后直接显示具体的覆盖物，这样就考虑到自定义覆盖物来实现聚合物的功能

//自定义显示图标的样式
var styled = function(url,size){
      this.url = url;
      this.size = size;
}
var styles = [new styled('pi.png',new BMap.Size(64, 64))];
//创建自定义覆盖物，参数：显示的点，显示标记信息，自定义样式
rm = new BMapLib.TextIconOverlay(new BMap.Point(116.404,39.915), markers.length,{styles:styles});//markers聚合物的数组，为了得到一个数值
map.addOverlay(rm);
//修改显示标记的信息
rm.setText("<span>本地区</span><span>"+markers.length+"</span>");

 这样覆盖物就可以显示了

 

第三步就是监听放大缩小事件，来控制聚合物的显示

var isShowOverlay  = false;//放大后显示了覆盖物后，判断缩小后是否显示聚合物
//鼠标缩放   zoomend是api中的事件  缩放后执行
map.addEventListener("zoomend",function(){
if(this.getZoom()>12){
	this.removeOverlay(rm);
	$.each(markers,function(i,marker){
		map.addOverlay(marker);
	});
	isShowOverlay = true;
}else{
	if(isShowOverlay){
		this.clearOverlays();
		addOverlay(this);//这个就是第二步的方法
	}
}
});

 这样在放大到一定级别的时候会显示具体的覆盖物，而在缩小到一定级别时又会回到自定义聚合物的显示