先说一下需求吧,类似做一个搜房网地图显示区域有多少个房产,地图放大后显示具体房产。
第一步肯定就是先要初始化地图
// 初始化地图 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);//这个就是第二步的方法 } } });
?这样在放大到一定级别的时候会显示具体的覆盖物,而在缩小到一定级别时又会回到自定义聚合物的显示
?
原文:http://mayijun000.iteye.com/blog/2164190