华为HarmonyOS地图服务 6 - 侦听事件来实现地图交互

本章节包含地图的点击和长按、相机移动（华为地图的移动是通过模拟相机移动的方式实现的）、以及"我的位置"按钮点击等事件侦听。

接口说明

以下是地图侦听事件相关接口，以下功能主要由MapComponentController提供，更多接口及使用方法请参见接口文档。

接口名	描述
on(type: 'mapClick', callback: Callback<mapCommon.LatLng>): void	设置地图点击事件侦听器。
on(type: 'mapLongClick', callback: Callback<mapCommon.LatLng>): void	设置地图长按事件侦听器。
on(type: 'cameraMoveStart', callback: Callback<number>): void	设置相机开始移动事件侦听器。
on(type: 'cameraMove', callback: Callback<void>): void	设置相机移动事件侦听器。
on(type: 'cameraIdle', callback: Callback<void>): void	设置相机移动结束事件侦听器。
on(type: 'markerClick' , callback: Callback<Marker>): void	设置marker点击事件侦听器。
on(type: 'myLocationButtonClick', callback: Callback<void>): void	设置我的位置按钮点击事件侦听器。
on(type: 'pointAnnotationClick', callback: Callback<PointAnnotation>): void	设置pointAnnotation点击事件侦听器。

开发步骤

地图点击事件侦听

TypeScript 复制代码

this.mapController.on("mapClick", (position) => {
console.info("mapClick", `on-mapClick position = ${position.longitude}`);
});

地图长按事件侦听

TypeScript 复制代码

this.mapController.on("mapLongClick", (position) => {
console.info("mapLongClick", `on-mapLongClick position = ${position.longitude}`);
});

相机移动侦听

相机移动时（华为地图的移动是通过模拟相机移动的方式实现的），通过设置侦听器，能够对相机移动状态进行侦听。

当相机开始移动时，会回调cameraMoveStart。

TypeScript 复制代码

this.mapController.on("cameraMoveStart", (reason) => {
console.info("cameraMoveStart", `on-cameraMoveStart reason = ${reason}`);
});

当相机移动或用户与触摸屏交互时，会多次调用cameraMove。

TypeScript 复制代码

this.mapController.on("cameraMove", () => {
console.info("cameraMove", `on-cameraMove`);
});

当相机停止移动时，会回调cameraIdle。

TypeScript 复制代码

this.mapController.on("cameraIdle", () => {
console.info("cameraIdle", `on-cameraIdle`);
});

标记点击事件侦听

标记是指在地图的指定位置添加标记以标识位置、商家、建筑等。详情请参见标记。

TypeScript 复制代码

this.mapController.on("markerClick", (marker) => {
console.info("markerClick", `markerClick: ${marker.getId()}`);
});

我的位置侦听

TypeScript 复制代码

this.mapController.on("myLocationButtonClick", () => {
console.info("myLocationButtonClick", `myLocationButtonClick`);
});

点注释事件侦听

点注释是指在地图的指定位置添加点注释以标识位置、商家、建筑等，并可以通过信息窗口展示详细信息。

TypeScript 复制代码

this.mapController.on("pointAnnotationClick", (pointAnnotation) => {
console.info("pointAnnotationClick", `pointAnnotationClick: ${pointAnnotation.getId()}`);
});