高德地图使用聚合点的时候,获取得到聚合点的原始数据

按照高德地图的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 =
            '
'; 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" ? ( ) : ( ), }) ); } }); }; 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"

你可能感兴趣的:(高德地图使用聚合点的时候,获取得到聚合点的原始数据)