高德地图点聚合，添加点击事件，并显示弹窗

1.地图实例化，拿到map，这一步就不写了

2.拿到要聚合的点数据 ，不管你的矢量数据是什么样子，都处理为以下格式，变量名必须为lnglat

const amapPoints = filteredData.map((item) => {

   const lnglat = [item.longitude, item.latitude]; // 坐标格式为 [longitude,latitude]

   return { lnglat};

});

3.通过map添加点聚合插件，amapPoints就是你要聚合的点的集合，到这一步点就加载地图上了，并且缩放地图可以聚合。

 this.map.plugin(["AMap.MarkerClusterer"], () => {
     let markers = new AMap.MarkerClusterer(this.map, amapPoints, {
         gridSize: 80,
         renderClusterMarker: _renderClusterMarker, //这里是设置聚合点的样式，不写为默认样式
         renderMarker:(context)=> {                 // 这里是未聚合点的样式，不写为默认样式
           // 设置未聚合点样式
         };                                                  
     });
         
 });
 var _renderClusterMarker = function (context) {  
   // 设置聚合点样式
 };

 4.设置未聚合点样式

  renderMarker: (context) => {
      const Info = context.data[0].data;
      const name = Info.unitName;
      var content = `<div style="background-color: hsla(180, 100%, 50%, 0.4);height: 28px;line-height: 28px;padding: 0 10px;border: 1px solid hsl(180, 100%, 40%);box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;white-space: nowrap;">${name}</div>`;
      context.marker.setContent(content);
 },

5.给每个点绑定点击事件

context.marker.on("click", clickEvent);

6.点击地图上的点显示弹窗，并自定义弹窗 

const clickEvent = (e) => {
// 自定义弹窗内容
  const infoWindowContent = `
          <div>
              <div style="font-size: 14px;text-align: center;background-color: #00aaa3;color: #fff;padding: 10px 0">
                  <span>${
                    Info.unitName == null ? "" : Info.unitName
                  }</span>
              </div>
              <div style="padding: 10px;font-size: 12px;background-color: #fff">
                  <div style="display: flex">
                      <div style="flex: 1;margin-bottom: 15px;">
                          门牌名称:${
                            Info.doorCard == null
                              ? ""
                              : Info.doorCard
                          }
                      </div>
                      <div style="flex: 1;margin-bottom: 15px;">
                          单位名称:${
                            Info.unitName == null
                              ? ""
                              : Info.unitName
                          }
                      </div>
                  </div>
              </div>
          </div>
          `;
  const infoWindow = new AMap.InfoWindow({
    content: infoWindowContent,
    // isCustom: true, //自定义窗体，设置为false为默认弹窗
    offset: new AMap.Pixel(115, -35), // 设置弹窗的位置
  });
  infoWindow.open(this.map, e.target.getPosition());
};