按照高德地图的js-api成功在地图上实现了聚合点， 效果还不错， 但是想点击聚合点的时候， 弹出该聚合点的详情（哪些点聚合成了这个点）， 直接代码如下：

useEffect(() => {
        let cluster: any;
        let count = orgs!.length;
        let gridSize = 40;

        let _renderClusterMarker = function (context: any) {
          // console.log(context.count, "---->", context);
          let factor = Math.pow(context.count / count, 1 / 18);
          let div = document.createElement("div");
          let Hue = 180 - factor * 180;
          let bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
          let fontColor = "hsla(" + Hue + ",100%,90%,1)";
          let borderColor = "hsla(" + Hue + ",100%,40%,1)";
          let shadowColor = "hsla(" + Hue + ",100%,90%,1)";
          div.style.backgroundColor = bgColor;
          let size = Math.round(
            20 + Math.pow(context.count / count, 1 / 5) * 20
          );
          div.style.width = div.style.height = size + "px";
          div.style.border = "solid 1px " + borderColor;
          div.style.borderRadius = size / 2 + "px";
          div.style.boxShadow = "0 0 5px " + shadowColor;
          div.innerHTML = context.count;
          div.style.lineHeight = size + "px";
          div.style.color = fontColor;
          div.style.fontSize = "12px";
          div.style.textAlign = "center";
          context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
          context.marker.setContent(div);
        };
        var _renderMarker = function (context: any) {
          var content =
            '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 16px; width: 16px; border: 1px solid hsl(180, 100%, 40%); border-radius: 8px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
          var offset = new AMap.Pixel(-9, -9);
          context.marker.setContent(content);
          context.marker.setOffset(offset);
        };

        const addCluster = () => {
          if (cluster) {
            cluster.setMap(null);
          }
          //完全自定义
          cluster = new AMap.MarkerCluster(map, orgs, {
            gridSize: gridSize, // 设置网格像素大小
            renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
            renderMarker: _renderMarker, // 自定义非聚合点样式
          });
          cluster.on("click", (data: any) => {
            // console.log("click", data);
            const { clusterData } = data;
            const list = clusterData ?? [];
            if (list.length === 1) {
              if (offCampusType === "org") {
                dispatch(showOffCampusOrgDetail({ id: list[0].id }));
              } else {
                dispatch(
                  showOffCampusOrgDetail({ id: list[0].organizationId })
                );
              }
            } else {
              // 没法准确的对应count和clusterData， 因此暂时屏蔽， 只能跳转到列表
              dispatch(
                showSimpleModal({
                  title:
                    offCampusType === "org" ? "选中培训点" : "选中培训机构",
                  component:
                    offCampusType === "org" ? (
                      <OrgsTable
                        currentSelectDistrict={currentDistrict.adcode}
                        data={list}
                      />
                    ) : (
                      <TrainingSpotTable
                        currentSelectDistrict={currentDistrict.adcode}
                        data={list}
                      />
                    ),
                })
              );
            }
          });
        };

        addCluster();

        return () => {
          cluster?.off("click");
          cluster?.setMap(null);
        };
  }, [ .... ]);

上面的核心就是：

cluster.on("click", (data: any) => {
            // console.log("click", data);
            const { clusterData } = data;
            ...
});

上面的代码不起作用， 请看下面：

地图plugin引入的时候， 一定要注意使用的如下， 我原来就是使用了MarkerClusterer， 没报错， 但是死活找不到上面的数据， 还有就是2.0的api中才有这个数据， 请注意

plugins:  AMap.MarkerClusterer->AMap.MarkerCluster
version: "2.0"