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

来源：互联网发布：js 判断鼠标滑动方向编辑：程序博客网时间：2024/06/05 17:20

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

最基本的页面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" onclick="add_overlay();" value="添加点聚合" />              <input type="button" onclick="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" onclick="add_overlay();" value="添加点聚合" />              <input type="button" onclick="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>

阅读全文

0 0