因为是公司项目所以只能放部分代码片段。
这边说一下思路。
因为高德地图的API是不提供分组功能的,如果我放一个麦当劳和肯德基的图标会自动聚合,但这并不是我想要的。
所以我就在render的时候手动筛选出这个聚合点的麦当劳和肯德基有多少个,直接把这个聚合点使用Dom进行替换。
//这里说一下iconList是我这些图标的数组对象。
// point是存放各种经纬度的,我进行筛选的
this.iconList.map((item) => {
if (item.checked) {
if (this.point.data[item.desc].length > 0) {
for (let el of this.point.data[item.desc]) {
let icon = new AMap.Icon({
size,
image: item.url,
imageSize: size,
});
// 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
let marker = new AMap.Marker({
icon: icon,
position: [el.longitude, el.latitude],
extData: { flag: item.desc, ...el },
// shadow: shadow,
offset: new AMap.Pixel(-18, -18), //设置文本标注偏移量
// content: `<div class='info'>${item.departName}</div>`, //设置文本标注内容
// direction: 'right' //设置文本标注方位
});
markers.push(marker);
} //for循环括号
} //if
}
// iconList循环结束
});
//marker里面最主要的就是extData存放一个标识符能进行分组筛选
map.plugin(["AMap.MarkerClusterer"], () => {
this.cluster = new AMap.MarkerClusterer(
map, // 地图实例
markers, // 海量点组成的数组
{
zoomOnClick: false,
renderClusterMarker: (ctx) => {
let str = ``;
let arr = [];
// 深拷贝
this.deepClone(this.iconList, arr);
//
arr.map((item) => {
// 把所有点都塞到对应的对象里面
item.list = [];
this.deepClone(
ctx.markers.filter((item1) => {
return item1.getExtData().flag == item.desc;
}),
item.list
);
});
// 循环添加dom
let indexList = [];
arr.map((item, index) => {
if (item.list && item.list.length > 0) {
indexList.push(item.desc);
// 判断当前品牌在地图上展示的索引
let zIndex = indexList.indexOf(item.desc);
str += `<div class="cluster-box" style="top:${
zIndex * 18 + 24
}px">
<img class="cluster-logo" src="${item.img}" />
<img class="cluster-border" src="${border}" >
<div class="cluster-num">${item.list.length}</div>
</div>`;
}
});
str = `<div style="position:relative;width:65px;height:${
indexList.length * 22
}px">${str}</div>`;
ctx.marker.setContent(str);
// ctx.markers[1].show()
},
}
);
});