百度地图API 重新生成点聚合解决点覆盖问题

最新推荐文章于 2021-04-22 16:22:32 发布

hayley-liu

最新推荐文章于 2021-04-22 16:22:32 发布

阅读量1.9k

点赞数 1

分类专栏： JS 文章标签：百度地图点聚合点覆盖重新

本文链接：https://blog.csdn.net/Hayley_Liu/article/details/77209238

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我使用百度点聚合用来解决加载大量点要素到地图上并可以查询,但是出现了一个问题，就是同一页面的点要素中随着查询次数的增加会产生点叠加覆盖现象的问题，再次记录改进并提高性能的方法。

最基本的页面markers.html（在此两个按钮的功能没有实现）：

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <style type="text/css">  
            body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}  
            #allmap{width:100%;height:80%;}  
            #r-result{width:100%;}  
        </style>  
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>  
        <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>  
        <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>  
        <title>点聚合</title>  
    </head>  
    <body>  
        <div id="allmap"></div>  
        <div id="r-result">  
            <input type="button" οnclick="add_overlay();" value="添加点聚合" />  
            <input type="button" οnclick="remove_overlay();" value="重新生成点聚合" />  
        </div>  
    </body>  
    </html>  
    <script type="text/javascript">  
        // 百度地图API功能  
        var map = new BMap.Map("allmap");  
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);  
        map.enableScrollWheelZoom();  
      
        var MAX = 10;  
        var markers = [];  
        var markerClusterer = null;  
        for (var i = 0; i < MAX; i++) {  
            var pt = new BMap.Point(Math.random()*40+85, Math.random()*30+21);  
            var marker = new BMap.Marker(pt);  
            map.addOverlay(marker);  
            markers.push(marker);  
        }  
        
        //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。  
        markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});    
    </script>

实现两个按钮的功能，用于添加点聚合，和删除点聚合并重新加载新的点

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <style type="text/css">  
            body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}  
            #allmap{width:100%;height:80%;}  
            #r-result{width:100%;}  
        </style>  
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>  
        <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>  
        <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>  
        <title>点聚合</title>  
    </head>  
    <body>  
        <div id="allmap"></div>  
        <div id="r-result">  
            <input type="button" οnclick="add_overlay();" value="添加点聚合" />  
            <input type="button" οnclick="remove_overlay();" value="重新生成点聚合" />  
        </div>  
    </body>  
    </html>  
    <script type="text/javascript">  
        // 百度地图API功能  
        var map = new BMap.Map("allmap");  
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);  
        map.enableScrollWheelZoom();  
      
        var MAX = 10;  
        var markers = [];  
        var markerClusterer = null;  
        for (var i = 0; i < MAX; i++) {  
            var pt = new BMap.Point(Math.random()*40+85, Math.random()*30+21);  
            var marker = new BMap.Marker(pt);  
            map.addOverlay(marker);  
            markers.push(marker);  
        }  
        
        function add_overlay(){  
            //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。  
            markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});  
        }  
      
        function remove_overlay(){  
            for(var i=0; i<4; i++){  
                map.removeOverlay(markers[i]);  
            }  
            var markers1 = markers.slice(4,markers.length);  
            markerClusterer.clearMarkers();         //此步骤需要    
            markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers1});  
        }    
    </script>