目录

如何监听地图的移动

问题现象

华为地图的移动是否有相关监听方法。

解决方案

可参考相机移动监听。相机移动时(华为地图的移动是通过模拟相机移动的方式实现的),通过设置监听器,能够对相机移动状态进行监听。

完整示例参考如下:

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

@Entry
@Component
struct HuaweiMapDemo {
  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  private mapEventManager?: map.MapEventManager;

  aboutToAppear(): void {
    // 地图初始化参数,设置地图中心点坐标及层级
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10
      }
    };

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类,用来操作地图
        this.mapController = mapController;
        // 初始化地图组件的事件管理接口
        this.mapEventManager = this.mapController.getEventManager();
        // 当相机开始移动时,会回调cameraMoveStart
        let cameraMoveStartCallback = (reason: number) => {
          console.info('cameraMoveStart', `on-cameraMoveStart reason = ${reason}`);
        };
        this.mapEventManager.on('cameraMoveStart', cameraMoveStartCallback);
        // 当相机移动或用户与触摸屏交互时,会多次调用cameraMove。
        let cameraMoveCallback = () => {
          console.info('cameraMove', `on-cameraMove`);
        };
        this.mapEventManager.on('cameraMove', cameraMoveCallback);
        // 当相机停止移动时,会回调cameraIdle
        let cameraIdleCallback = () => {
          console.info('cameraIdle', `on-cameraIdle`);
        };
        this.mapEventManager.on('cameraIdle', cameraIdleCallback);
      } else {
        console.error(`Failed to initialize the map, code is:${err.code}, message is ${err.message}`);
      }
    };
  }

  build() {
    Stack() {
      // 调用MapComponent组件初始化地图
      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');
    }.height('100%')
  }
}

本示例需要开通地图服务,并进行相应配置,具体步骤如下:

  1. 登录HarmonyOS 开发者中心网站,选择“我的项目”。
  2. 在项目列表中找到您的项目,在项目下的应用列表中选择需要打开“地图服务”的应用。
  3. 选择API管理,找到“地图服务”开关,打开开关。
  4. 确认已经开启“地图服务”开放能力,并完成手动签名。

常见FAQ

Q:如何区别是手势拖动导致的相机移动还是导航路径导致的相机移动呢?

A:on('cameraMoveStart')接口回调会返回code,可以判断相机改变的原因。

Q:为什么cameraMove监听事件没有返回经纬度?

A:规格如此。从版本4.1.0(11)开始支持的on('cameraMove')监听事件的回调函数是无返回结果的回调函数。替代接口从版本5.0.0(12)开始支持的MapEventManager.on(type: 'cameraMove')也是无返回结果的回调函数。