#鸿蒙通关秘籍# 使用Map Kit时如何申请地图权限并进行地图展示？

1.生成密钥和证书请求文件

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

我们点击new

进行生成操作

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

输入我们的密码，点击ok，完成创建

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

这里我们定义以下我们的名称，这个要记住，后续进行签名的时候需要用得到

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

点击next，创建完p12文件，接下来就需要我们创建csr文件，步骤如下所示

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

进入我们的​​AppGallery Connect​​（简称AGC），我们下面需要在上面拿到我们需要的另外两个文件

进入​​证书、APP ID和Profile​​

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

按照下图进入证书，点击新增证书，填好我们的内容，以及选择我们刚刚生成的文件，就可以新增对应的数字证书

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

我们新建完之后就可以点击下载来下载我们的数字证书

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

进入项目页面

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

点击新建项目

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

填好信息后一直下一步到这个页面，我们要配置默认数据处理位置

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

选择中国

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

然后我们的项目就创建好了，现在返回到我们的证书、APP ID和Profile页面，我们需要在APP ID里面创建我们的应用

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

我们将应用信息填好，应用包名为我们对应项目的应用包名，可以在项目中查看

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

选择好我们刚刚创建的项目

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

点击下一步后，选择我们要开启的权限，这里选择地图服务

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

下面我们需要添加我们的设备，我们需要知道我们设备的UDID号，方法如下方所示

使用PC连接手机后，打开命令行工具，进入HDC目录（一般为：DevEco Studio安装目录/sdk/[SDK版本]/openharmony/toolchains），输入hdc shell bm get --udid命令，获取设备的UDID。

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

这样我们就可以找到自己的UDID,我们添加设备后，输入刚刚的信息

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

然后我们进入Profile页面，添加Profile，项目，证书和设备选择刚刚添加的

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

这样我们的Profile就生成好了，下载我们文件

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

我们生成好我们需要的几个文件后，再最后再进行一个配置

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

打开我们的项目结构

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

填好刚刚生成的签名信息

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

点击我们右边的这个小指纹

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

我们将生成的这个指纹复制下来

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

返回我的项目，将刚刚复制到的内容粘贴到这个公钥指纹里面保存

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

记录下来这个Client ID

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

在我们的module.json5中配置以下代码

"metadata": [
      {
        "name": "client_id",
        "value": "112822483"  // 配置为获取的Client ID
      }
    ]

复制

[HarmonyOS Next] AppGallery Connect的配置以及Map Kit的使用-鸿蒙开发者社区

这样我们的权限就完全申请好了，如果还是没法用，可能时因为配置好后需要等待十分钟

然后在页面放入以下代码进行测试

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 !== undefined) {
      this.mapController.show();
    }
  }

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

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