【鸿蒙】HarmonyOS NEXT之如何正常加载地图组件

news2025/6/7 1:26:04

1、不支持模拟器，需要真机！

2、Map地图需要在AGC上申请权限，需要在AGC上创建对应的项目

地址：

AppGallery Connect

2.1 AGC中项目创建

2.1.1 添加项目

2.1.2 起个名字

2.1.3 添加应用：

2.1.4 选择HarmonyOS APP，点击到APP ID中

2.1.5 定义应用名称和应用包名

2.1.6 开通地图服务

2.1.7 创建成功：

2.2 Dev Eco Studio创建云项目

2.2.1 云模板创建项目

2.2.2 包名保持一致

2.2.3 链接到你AGC平台上创建的项目，这里我缺少了一个默认数据保存位置，点击设置一下就可以了

2.2.4 修改Index页面中的代码为官方案例代码：

官方案例代码链接：文档中心

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
@Entry
@Component
struct HuaweiMapDemo {
  private TAG = "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();
        let callback = () => {
          console.info(this.TAG, `on-mapLoad`);
        }
        this.mapEventManager.on("mapLoad", callback);
      }
    };
  }


  // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效
  onPageShow(): void {
    // 将地图切换到前台
    if (this.mapController) {
      this.mapController.show();
    }
  }


  // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效
  onPageHide(): void {
    // 将地图切换到后台
    if (this.mapController) {
      this.mapController.hide();
    }
  }


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