gisiOS - 地图开发程序员

百度地图点聚合填坑指南

2017-07-05  本文已影响494人  angkee

点聚合 (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;
    }

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

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

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

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

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

上一篇下一篇

猜你喜欢

热点阅读