百度地图--点聚合 + 弹窗事件

记录每一个小坑、大坑

目前做项目接触到了如百度地图点聚合的需求，老规矩，看文档记笔记。

0. 其它

---

• 参考了这位老哥的文章
• 百度地图官网-点聚合API
• 上一篇：ECharts--自定义tooltip属性
• 下一篇：LayUI--表格 + 分页

1. 点聚合

---

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

百度地图-点聚合

2. 简单实例

---

• HTML \ CSS

• JS
  1. 启用点聚合功能，其中的 data 可以根据需求进行异步获取，得到的数据中应当有横纵坐标
  2. 可以开启定位，达到每次打开地图快速定位到相关位置

• 聚合点的样式修改
  如果觉得默认样式不好看，或者有特殊的需求，可以自定义点的样式

// 添加点聚合效果
    var markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers,
       //最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
        minClusterSize: 2, 
        styles: [{
           // 此处URL不知道能否用本地图片，自己试了一下不能，待解答！
            url: 'dist/img/smallred.png',
            size: new BMap.Size(0, 0)
        }]
    });

3. 添加点击事件

---

正常情况下会需要为每个点添加点击事件，如弹出弹窗显示信息

弹窗

• 添加点击事件

// 添加点击事件,可在循环数据时调用
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(content, e)
            }
        );
    }

• 弹窗
  1. openInfo(content, e)，这里可以传需求的参数；
  2. var infoWindow = new BMap.InfoWindow( 拼接数据 , opts);， 这里可以自定义拼接参数；

// 弹窗
    var opts = {
        width: 270, // 信息窗口宽度
        height: 100, // 信息窗口高度
        enableMessage: true//设置允许信息窗发送短息
    };

    // 弹窗点击事件
    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        // 创建信息窗口对象
        var infoWindow = new BMap.InfoWindow(`
自定义内容
${content}
` , opts);
        //开启信息窗口
        map.openInfoWindow(infoWindow, point);
    }

4. 结束

---

1.更加复杂的需求也没接触到，先整理这么多。
2.期间弹窗部分想结合 layer 来做的，不过失败了，报错是：不是一个正确的节点，layer 是封装好的可能不行。
3.把 layer 组件放在 “BMap.InfoWindow( layer组件 , opts)” 的第一个参数是可以调用的，但是后台报错了，最后还是放弃了这个想法。

点个赞呗！