按照高德地图的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"