百度地图点聚合填坑指南

点聚合 （MarkerClusterer 标记聚合器）用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。

点聚合的实现原理是按照以某点为中心的正方形作为区域，把此区域的点聚合在一个点上，并随着地图比例尺改变此点区域大小，同时改变聚合点的数量。

百度地图点聚合.png

在实际项目开发中，我遇到了点聚合的一个难题。** 如何点击聚合点，显示自定义信息窗口？** Google 了半天也没有找到答案，也分析了点聚合的源码，但是如果直接在源码上修改，时间成本很高，最终一位同事给出了好的建议：我们只需要点聚合后的数据，拿到数据之后自己去标注这个 Marker. 听完之后，豁然开朗。Good Idea!

先上一张效果图！

点聚合.png

项目地址：https://github.com/todayqq/MarkerClusterer
点击预览：https://todayqq.github.io/MarkerClusterer/

核心代码示例：

    var datas = [{
        'localtion': '120.585239,31.298881'
    }, {
        'localtion': '120.585239,31.298881'    
    }, {
        'localtion': '120.585239,31.298881'    
    }, {
        'localtion': '120.585239,31.298881'    
    }, {
        'localtion': '120.585239,31.298881'   
    }]

    var markers = [];
    for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        var localtion = data.localtion.split(',');
        var m = new BMap.Marker(new BMap.Point(localtion[0], localtion[1]));
        m.data = data;
        markers.push(m);
    }

    markerClustersPoint(markers);

    //地图缩放重新计算聚合点
    map.addEventListener("zoomend",function(){
        markerClustersPoint(markers);
    });


    function markerClustersPoint(markers) {
        var markerClusterer = new BMapLib.MarkerClusterer(map, {
            markers: markers,
            minClusterSize: 3, //最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
            styles: [{
                url: 'img/info.png',
                size: new BMap.Size(0, 0)
            }]
        });
        // console.log(markerClusterer)
        // 拿到所有的聚合点
        var mk = markerClusterer._clusters;
        var oldmk = [];

        for (var i = 0; i < mk.length; i++) {
            //小于3个marker不再进行标注
            var mConut = mk[i]._markers.length;
            if (3 > mConut) continue;
            var options = [];

            oldmk.push(addMarker(mk[i]._center));
        }
    }

    //标记marker，显示infowindow
    function addMarker(point){
      var marker = new BMap.Marker(point, {
            icon: new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
                scale: 10,
                strokeWeight: 1,
                strokeColor: 'white',
                fillColor: 'red',
                fillOpacity: 0.99
            })
        });  

        var info = [
            "<div class='infotip'>",
                "<div class='circle'><span style='background-color:blue'>",
                60 ,
                "</span></div>",
                "<div class='msg'><span class='title'>人数：</span>"+ 10 + "<br/><span class='title'>提示：</span>" + 'this is a test' +"</div><span class='arrows'></span>" ,
            "</div>",
        ].join('');

        var infoWindow = new BMap.InfoWindow(info, {
            maxWidth: 100,
            maxHeight: 50
        });

        marker.addEventListener("click", function(){          
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        });
        map.addOverlay(marker);
        return marker;
    }

这份代码示例中有自定义覆盖物，自定义地图控件，具体代码我就不再标注了，代码中都能看的到。另外还有地图的小技巧分享给大家。
不想看到地图中地铁、公路等信息，如何修改地图样式呢？

• 自定义地图样式在线地址： http://developer.baidu.com/map/custom/

隐藏百度地图 Logo, 添加这段 Css 即可

.anchorBL a img{
     display: none;
 }
.anchorBL span span{
     display: none;
 }

如果大家还想完成一些示例 Demo 中没有的，顺便可以去百度地图的扩展库中找一找。

• http://lbsyun.baidu.com/index.php?title=open/library

觉得有用是不是该点赞呢？