华为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()}`);
});
相关推荐
双翌视觉20 小时前
机器视觉的汽车中控屏FPC模切应用
数码相机·汽车
猫林老师1 天前
HarmonyOS分布式硬件共享:调用手机摄像头的手表应用
华为·交互·harmonyos
Chicheng_MA1 天前
算能 CV184 智能相机整体方案介绍
人工智能·数码相机·算能
前端世界1 天前
HarmonyOS应用开发指南:Toast无法显示的完整排查流程与实战案例
华为·harmonyos
Antonio9151 天前
【图像处理】rgb和srgb
图像处理·人工智能·数码相机
格林威1 天前
UV紫外相机的简单介绍和场景应用
人工智能·数码相机·计算机视觉·视觉检测·制造·uv·工业相机
安卓开发者1 天前
鸿蒙NEXT Wear Engine穿戴侧应用开发完全指南
ubuntu·华为·harmonyos
安卓开发者1 天前
鸿蒙Next振动开发指南:打造沉浸式触觉反馈体验
华为·harmonyos
Devil枫1 天前
HarmonyOS屏幕方向适配指南
华为·harmonyos
Matlab仿真实验室1 天前
基于Matlab实现双目图计算深度图
开发语言·数码相机·matlab·双目图计算深度图