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

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%')}
}

2.2.5 entry/src/mian/ets下的module.json5中设置metadata字段，其中name值为“client_id",value的值从AGC中复制。

2.2.6 并在配置文件module.json5中申请权限：

2.3 手动生成签名并配置

2.3.1 点击生成key和CSR

2.3.2 选择一个文件夹保存.p12

2.3.3 设置保存路径

2.3.4 起个别名

2.3.5 创建空白文件夹保存CSR文件，同样记住，后面要用

2.3.6 在证书、APP ID和Profile中新增证书并下载

2.3.7 添加Profile

点击下载：

2.3.8 连接真机后，确保这里的自动生成的签名内容已删除

2.3.9 手动设置签名

2.3.9 点击指纹选项

2.3.10 复制指纹

2.3.11 在AGC中我们的项目中添加指纹证书

2.3.12 添加公钥指纹

2.4 选择真机运行