收起
自动换行
深色代码主题
复制
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%')
  }
}

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

登录AppGallery Connect网站，选择“我的项目”。
在项目列表中找到您的项目，在项目下的应用列表中选择需要打开“地图服务”的应用。
选择API管理，找到“地图服务”开关，打开开关。
确认已经开启“地图服务”开放能力，并完成手动签名。

常见FAQ

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

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

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

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

地图绘制在使用点聚合时并支持设置点信息窗和点注释功能

使用POI关键字搜索结果跟花瓣地图搜索不一致

意见反馈

以上内容对您是否有帮助？

意见反馈

如果您有其他疑问，您也可以通过开发者社区问答频道来和我们联系探讨。

社区提问智能客服提问