高德地图也在不断迭代，目前2.0以下版本已经在iOS15 beta版本不适用了，而且2.0以下版本由于卡顿等问题也不在符合用户的使用需要，升级迫在眉睫，但2.0对于标记的聚和与之前版本有较大区别，在此将写法记录一下，也希望能帮到大家。
2.0以前对于标记的处理是将标记全部在地图上画出来之后通过MarkerClusterer聚合，不仅对标记的修改较为复杂，还会导致严重的卡顿问题。而在升级到2.0后，标记的聚合便是通过MarkerCluster将标记的坐标打在地图上，然后直接渲染的方式了，如下所示：
方式一：
this.cluster = new AMap.MarkerCluster(this.map, this.allLnglat, {
styles: styles,
renderMarker: this.renderMarker
});
其中只列举出了最重要的几个参数：
-
this.map:当前渲染的地图
-
this.allLnglat:所有的标记坐标，例如：[{ lnglat: [117.366,36.577] }]
-
styles: 聚合点上显示的图标，例如：
[{ url: 'https://a.amap.com/jsapi_demos/static/images/blue.png', size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -16) },{ url: 'https://a.amap.com/jsapi_demos/static/images/green.png', size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -16) }]-
renderMarker：非聚合点上显示的标记，也就是单个点显示的标记，和2.0版本前我们定义的marker是一个东西，可以自定义样式添加点击事件等，例如：
renderMarker(context) { //显示点的经纬度context.data[0].lnglat //此处应有逻辑，通过遍历所有点的经纬度来识别当前标记对应的数据 //此处content为设置当个标记的样式 context.marker.setContent(content); //此处为设置标记在地图上的偏移，根据标记物大小处理 context.marker.setOffset(new AMap.Pixel(-20, -20)); //此处为设置标记是否显示在最上方，一般只有选中的标记在最上方 context.marker.setTop(top); //此处为设置标记携带的数据，点击事件会使用 context.marker.setExtData({ id: id }); //此处为添加单个标记点击事件 context.marker.on('click', ev => { //当前标记居中 this.map.setZoomAndCenter(16, ev.target.getPosition()); //获取标记携带的数据 const extData = ev.target.getExtData(); const id = extData.id; }); },
-
由于现在聚合点和标记点都是使用的标记，因此聚合点没有提供点击散开的功能，我们可以通过一下方式实现：
this.cluster.on('click', (item) => {
//此处是通过包含点的数量判断是否是聚合点，不是聚合点就执行上方单个点的点击方式
if(item.clusterData.length <= 1) {
return;
}
//这里是计算所有聚合点的中心点
let alllng = 0, alllat = 0;
for(const mo of item.clusterData) {
alllng += mo.lnglat.lng;
alllat += mo.lnglat.lat;
}
const lat = alllat / item.clusterData.length;
const lng = alllng / item.clusterData.length;
//这里是放大地图，此处写死了每次点击放大的级别，可以根据点的数量和当前大小适应放大，体验更佳
this.map.setZoomAndCenter(this.map.getZoom() + 2, [lng, lat]);
});
方式二：
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 用于实现非聚合点的自定义设置
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 点击聚合点时是否散开（已弃用）
点聚合及点标记的鼠标移入、移出、点击效果的实现(只提供思路，不进行数据效果实现)
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]);
});
网友评论