百度地图加载海量点、聚合

最新推荐文章于 2024-07-08 11:10:14 发布

闻雨轩少爷

最新推荐文章于 2024-07-08 11:10:14 发布

阅读量1.8w

点赞数 1

本文链接：https://blog.csdn.net/yeyujiao8888/article/details/51331141

版权

本文介绍如何在地图上高效地显示上万个点，通过聚合技术避免页面卡顿。示例中展示了使用JavaScript代码实现这一功能。

摘要由CSDN通过智能技术生成

需求如下：地图上加载上万个点。使用marker发现点太多页面会卡死，研究发现可以使用聚合及海量点实现。

js代码如下：

 
//聚合实现代码
function ss(markerArr){//markerArr数据库数据查询的结果
    var markers = []; 
    var pt = null;  
    var i = 0;  
    for (; i < markerArr.length; i++) {  
       pt = new BMap.Point(markerArr[i].longitude, markerArr[i].latitude);  
       markers.push(new BMap.Marker(pt));  
    }  
    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers}); 
}

//海量点实现代码
function sss(){
    var points = [];  // 添加海量点数据
    for (var i = 0; i < markerArr.length; i++) {
        points.push(new BMap.Point(markerArr[i].longitude, markerArr[i].latitude));
    }
    var options = {
            size: 6,
            shape: 2,
            color: '#d340c3'
        };
    basestationPointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
    basestationPointCollection.addEventListener('click', function (e) {
          var basestationName="";//名称
          var basestationType="";//地址
          //关于自定义信息 修改json [[经度,维度,1,名称,地址,电话]]
          //循环查出值
          for (var i = 0; i < markerArr.length; i++) {
              points.push(new BMap.Point(markerArr[i].longitude,markerArr