在使用点聚合能力时，可以使用on('markerClusterClick')监听聚合图层的标记点击事件。可在该事件中为标记添加自定义信息窗及添加点注释。
具体实现可参考下述demo：
import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
@Entry
@Component
struct MapPages {
private mapOptions?: mapCommon.MapOptions;
private mapController?: map.MapComponentController;
private callback?: AsyncCallback<map.MapComponentController>;
pointAnnotation?: map.PointAnnotation;
aboutToAppear(): void {
this.mapOptions = {
position: {
target: {
latitude: 31.98,
longitude: 118.7
},
zoom: 7
}
};
this.callback = async (err, mapController) => {
if (!err) {
this.mapController = mapController;
// 生成待聚合点
let clusterItem1: mapCommon.ClusterItem = {
position: {
latitude: 31.98,
longitude: 118.7
}
};
let clusterItem2: mapCommon.ClusterItem = {
position: {
latitude: 32.99,
longitude: 118.9
}
};
let clusterItem3: mapCommon.ClusterItem = {
position: {
latitude: 31.5,
longitude: 118.7
}
};
let clusterItem4: mapCommon.ClusterItem = {
position: {
latitude: 30,
longitude: 118.7
}
};
let clusterItem5: mapCommon.ClusterItem = {
position: {
latitude: 29.98,
longitude: 117.7
}
};
let clusterItem6: mapCommon.ClusterItem = {
position: {
latitude: 31.98,
longitude: 120.7
}
};
let clusterItem7: mapCommon.ClusterItem = {
position: {
latitude: 25.98,
longitude: 119.7
}
};
let clusterItem8: mapCommon.ClusterItem = {
position: {
latitude: 30.98,
longitude: 110.7
}
};
let clusterItem9: mapCommon.ClusterItem = {
position: {
latitude: 30.98,
longitude: 115.7
}
};
let clusterItem10: mapCommon.ClusterItem = {
position: {
latitude: 28.98,
longitude: 122.7
}
};
let array: Array<mapCommon.ClusterItem> = [
clusterItem1,
clusterItem2,
clusterItem3,
clusterItem4,
clusterItem5,
clusterItem6,
clusterItem7,
clusterItem8,
clusterItem9,
clusterItem10
];
// 生成聚合图层的入参，聚合distance设置为100vp
let clusterOverlayParams: mapCommon.ClusterOverlayParams = { distance: 100, clusterItems: array };
// 调用addClusterOverlay生成聚合图层
let clusterOverlay: map.ClusterOverlay = await this.mapController.addClusterOverlay(clusterOverlayParams);
// 监听聚合图层的标记点击事件
let callback1 = async (markerClusterInfo: map.MarkerClusterInfo) => {
this.pointAnnotation?.remove();
console.info('markerClusterClick', `callback1 markerClusterInfo:` + markerClusterInfo.clusterItems.length);
if (markerClusterInfo.clusterItems.length > 1) {
// 缩放地图展开聚合
this.mapController?.animateCamera(map.newLatLng(markerClusterInfo.clusterItems[0].position), 1000);
this.mapController?.animateCamera(map.zoomIn(), 1000);
} else {
// 当聚合节点数组为1时显示信息窗
markerClusterInfo.marker.setClickable(true);
markerClusterInfo.marker.setTitle('信息窗');
markerClusterInfo.marker.setInfoWindowVisible(true);
// 点注释
let pointAnnotationOptions: mapCommon.PointAnnotationParams = {
// 定义点注释图标锚点
position: {
latitude: markerClusterInfo.marker.getPosition().latitude,
longitude: markerClusterInfo.marker.getPosition().longitude
},
// 点注释显示的位置
textPosition: mapCommon.TextPosition.BOTTOM,
// 定义点注释名称与地图POI名称相同时，是否支持去重
repeatable: true,
// 定义点注释的碰撞规则
collisionRule: mapCommon.CollisionRule.NAME,
// 定义点注释的标题，数组长度最小为1，最大为3
titles: [{
// 定义标题内容
content: '标点注释',
// 定义标题字体颜色
color: 0xFF000000,
// 定义标题字体大小
fontSize: 15,
}
],
// 定义点注释的锚点在水平方向上的位置
anchorU: 0.5,
// 定义点注释的锚点在垂直方向上的位置
anchorV: 1,
// 定义点注释的显示属性，为true时，在被碰撞后仍能显示
forceVisible: false,
// 定义碰撞优先级，数值越大，优先级越低
priority: Number.MAX_VALUE,
// 定义点注释展示的最小层级
minZoom: 5,
// 定义点注释展示的最大层级
maxZoom: 20,
// 定义点注释是否可见
visible: true,
// 定义点注释叠加层级属性
zIndex: 10
};
this.pointAnnotation = await this.mapController?.addPointAnnotation(pointAnnotationOptions);
}
};
// 添加监听
clusterOverlay.on('markerClusterClick', callback1);
// 监听移动事件，当移动时删除点注释
this.mapController.on('cameraMove', () => {
this.pointAnnotation?.remove();
console.info('cameraMove', `on-cameraMove`);
});
}
};
}
build() {
Stack() {
Column() {
MapComponent({
mapOptions: this.mapOptions,
mapCallback: this.callback,
// 自定义信息窗，点击标记后可展示信息窗
customInfoWindow: this.customInfoWindow
})
.width('100%')
.height('100%');
}.width('100%');
}.height('100%');
}
// 自定义信息窗BuilderParam
@BuilderParam customInfoWindow: ($$: map.MarkerDelegate) => void = this.customInfoWindowBuilder;
// 自定义信息窗Builder
@Builder
customInfoWindowBuilder($$: map.MarkerDelegate) {
if ($$.marker) {
Text($$.marker.getTitle())
.width('50%')
.height(50)
.backgroundColor(Color.White)
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.font({ size: 25, weight: 10, style: FontStyle.Italic });
}
}
}