1. 地图插件中添加 “MarkerClusterer” 插件 （main.js数组中）
2. 数据中添加点坐标的事件
markers 为 后台传的数组
markerRefs 为额外的数组
click 为每个坐标点的点击事件
markers.forEach(ele => {
this.markers.push({
...ele,
events: {
init(o) {
self.markerRefs.push(o);
},
click(e) {
console.log('e3', e)
}
},
})
})
3. 创建MarkerClusterer对象
data() {
let self = this;
return {
events: {
init(o) {
setTimeout(() => {
let cluster = new AMap.MarkerClusterer(o, self.markerRefs, {
gridSize: 80,
renderCluserMarker: self._renderCluserMarker,
});
}, 1000);
},
},
};
},
4. 点聚合每个坐标的样式
_renderCluserMarker(context) {
const count = this.markers.length;
let factor = Math.pow(context.count / count, 1 / 18);
let imgs = document.createElement("img");
imgs.src=this.ur3
context.marker.setContent(imgs);
},