在使用高德地图API的过程中，发现2.0版本的点聚合和之前版本的使用上有很大的区别，在此做一下点聚合的使用以及点标记的事件的记录。
在2.0之前的版本，MarkerClusterer插件的使用如下：
new AMap.MarkerClusterer(
//地图实例对象
map:Map,
//marker类构造对象
markers:Array<Marker>,
//点聚合属性，具体可查阅https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer
opts:MarkerClustererOptions
)而2.0版本对MarkerClusterer进行了改动
new AMap.MarkerClusterer(
//地图实例对象
map:Map,
//经纬度数组对象
dataOptions:Array
//点聚合属性
markerClusterOptions:Object
)
dataOptions:[
{
weight: Number, //权重(可选)以权重高的点为中心进行聚合
lnglat: Array //经纬度数组 string[] | number[]
}
]在2.0版本中，markerClusterOptions去掉了minClusterSize 集合的最小数量，zoomOnclick 点击聚合点时是否散开;对renderClusterMarker属性进行了修改,去掉了renderClusterMarker:function的markers属性；新增了renderMarker: function 用于实现非聚合点的自定义设置文章来源：https://www.toymoban.com/news/detail-649886.html
new AMap.MarkerClusterer(map, marker, {
gridSize: number, //聚合计算时网格的像素大小，默认60
//minClusterSize 聚合的最小数量（已弃用）
maxZoom: number, //最大聚合级别，超出级别不进行聚合，默认18
averageCenter: boolean, //聚合点的图标位置是否是所有聚合内点的中心点，默认true，如果有权重则以权重高的为中心进行聚合
clusterByZoomChange: boolean, //地图缩放过程中是否聚合,默认false
styles: Array<Object>, //聚合后点标记样式
//styles包含以下属性
//url{string} （必选）图标的url地址
//size{AMap.Size} （必选）图标的图片大小
//offset{AMap.Pixel} （可选）图标相对于左上角的偏移量
//imageOffset{AMap.Pixel} （可选）图片在可视区域的偏移量
//textColor{String} （可选）文字颜色，默认#000000
//textSize{Number} （可选）文字大小，默认10
renderClusterMarker: (cluster: any) => {
cluster.count //当前聚合点下marker的数量
cluster.marker //当前聚合点的marker对象
},
renderMarker: (context: any) => {
context.marker //非聚合点的marker对象
}
//zoomOnClick 点击聚合点时是否散开（已弃用）
}） 点聚合及点标记的鼠标移入、移出、点击效果的实现(只提供思路，不进行数据效果实现)文章来源地址https://www.toymoban.com/news/detail-649886.html
const markerData: any[] //获取的标记坐标等信息
const markers: [{
weight: number, //权重
lnglat: number[] | string [], //经纬度
extData:object //其他需要传递的信息，如id、name等
}] = []
markerData.map((item: any) => {
markers.push({
weight: item.weight,
lnglat: [item.lon, item.lat],
extData: {
id: item.id,
icon: url,
markerIcon: url
}
})
})
const clu = new AMap.MarkerClusterer(map, markers, {
//聚合点自定义样式交互
renderClusterMarker: (cluster: any) = {
//marker点标记API
//自定义聚合样式
//cluster.data[0].extData可获取到传入的其他数据
cluster.marker.setAnchor('bottom-center');
cluster.marker.setIcon(new AMap.Icon({ image: cluster.data[0].extData.markerIcon }));
cluster.marker.setLabel({
content: `<span style="cursor: pointer;">${cluster.count}</span>`,
direction: 'center',
offset: new AMap.Pixel(0, -5),
})
//添加鼠标移入放大效果
cluster.marker.on('mouseover', () => {
cluster.marker.setIcon(
new AMap.Icon({
image: cluster.marker.getIcon()._opts.image,
size: new AMap.Size(40, 50), //根据image分辨率计算放大后尺寸
imageSize: new AMap.Size(40, 50),
}),
);
cluster.marker.setLabel({
content: `<span style="cursor: pointer;font-size: 20px;">${cluster.count}</span>`,
direction: 'center',
offset: new AMap.Pixel(0, -5),
});
});
//鼠标移出还原
cluster.marker.on('mouseout', () => {
cluster.marker.setIcon(
new AMap.Icon({
image: cluster.marker.getIcon()._opts.image,
size: new AMap.Size(32, 40),
imageSize: new AMap.Size(32, 40),
}),
);
cluster.marker.setLabel({
content: `<span style="cursor: pointer;">${cluster.count}</span>`,
direction: 'center',
offset: new AMap.Pixel(0, -5),
});
});
},
//非聚合点自定义样式交互
renderMarker: (context: any) => {
context.marker.setAnchor('bottom-center');
context.marker.setOffset(new AMap.Pixel(0, 0));
context.marker.setIcon(new AMap.Icon({ image: context.data[0].extData.markerIcon }));
context.marker.setLabel({
content: `<img src=${context.data[0].extData.icon} style="cursor: pointer;" />`,
direction: 'center',
offset: new AMap.Pixel(0, -5),
});
//鼠标移入移出同上，不再重复
//marker鼠标点击事件
context.marker.on('click', () => {
const params = context.data[0].extData;
console.log(params.id) //id
});
}
})
//添加聚合点点击事件
clu.on('click', (data: any) => {
//判断是否是聚合点，不是聚合点就执行单个点击方式
if (data.clusterData.length <= 1) return;
//计算所有聚合点的中心点
let alng = 0,
alat = 0;
for (const m of data.clusterData) {
alng += m.lnglat.lng;
alat += m.lnglat.lat;
}
const lat = alat / data.clusterData.length;
const lng = alng / data.clusterData.length;
//以中心点固定倍数放大地图，达到展开聚合点的效果
map.setZoom(10);
map.setCenter([lng, lat]);
});到了这里，关于高德地图api2.0点聚合及点标记事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
