华为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点击事件侦听器。 |
开发步骤
地图点击事件侦听
this.mapController.on("mapClick", (position) => {
console.info("mapClick", `on-mapClick position = ${position.longitude}`);
});
地图长按事件侦听
this.mapController.on("mapLongClick", (position) => {
console.info("mapLongClick", `on-mapLongClick position = ${position.longitude}`);
});
相机移动侦听
相机移动时(华为地图的移动是通过模拟相机移动的方式实现的),通过设置侦听器,能够对相机移动状态进行侦听。
- 当相机开始移动时,会回调cameraMoveStart。
this.mapController.on("cameraMoveStart", (reason) => {
console.info("cameraMoveStart", `on-cameraMoveStart reason = ${reason}`);
});
- 当相机移动或用户与触摸屏交互时,会多次调用cameraMove。
this.mapController.on("cameraMove", () => {
console.info("cameraMove", `on-cameraMove`);
});
- 当相机停止移动时,会回调cameraIdle。
this.mapController.on("cameraIdle", () => {
console.info("cameraIdle", `on-cameraIdle`);
});
标记点击事件侦听
标记是指在地图的指定位置添加标记以标识位置、商家、建筑等。详情请参见标记。
this.mapController.on("markerClick", (marker) => {
console.info("markerClick", `markerClick: ${marker.getId()}`);
});
我的位置侦听
this.mapController.on("myLocationButtonClick", () => {
console.info("myLocationButtonClick", `myLocationButtonClick`);
});
点注释事件侦听
点注释是指在地图的指定位置添加点注释以标识位置、商家、建筑等,并可以通过信息窗口展示详细信息。
this.mapController.on("pointAnnotationClick", (pointAnnotation) => {
console.info("pointAnnotationClick", `pointAnnotationClick: ${pointAnnotation.getId()}`);
});