【HarmonyOS实战开发】鸿蒙原生地图调用

地图服务（Map Kit）

1.鸿蒙原生地图必须调试证书才能显示地图。
2.注意 Windows 模拟器暂不支持地图功能（目前暂时只能用真机调试，作者贫困无真机，只讲方法）

生成签名证书指纹：

●p12 文件
●csr 文件

按照步骤

可以在桌面新建一个空文件夹，输入密码（要记得，不然配置的时候忘记的话，还要重新做一遍这个操作）

Alias：请记住该别名，后续签名配置需要使用。（这个需要根据业务需求做，我是自己用的所以名字起的和文件夹名字一样避免忘记）

国家写一下 然后下一步

*.p12和.car要放在同一个文件夹下

文件夹这样是ok的，继续。。。
AGC 申请调试证书 .cer

1.请确保您的开发者帐号已实名认证 。
2.每个帐号最多申请 2 个调试证书（开发阶段），1 个发布证书（上架发版）。
3.证书格式为 .cer，包含公钥、证书指纹等信息。

进入方法，随便打开一个华为的页面 右上角小人头打开 点击管理中心 登录AppGallery Connect

进入 AppGallery Connect 点击用户与访问

点击新增证书

证书名称，证书类型都写完以后，选取刚刚在 DevEco Studio 中申请的 .csr

提交 下载到刚才的文件夹中

AGC 创建HarmonyOS应用

1.登录AppGallery Connect， 点击“我的应用”。
2.点击应用列表右侧的 “新建”。
3.在 AppScope/app.json5 DevEco Studio 的 bundleName 复制到应用包名上，因为每人的名字是不一样的，所以我就不贴图了

完事之后点添加 Profile

要填写这三个地方，设备记得把所有设备勾选上
完事之后下载，把下载的文件放到这个文件夹中

现在就可以配置签名信息了

右上角

点击 把后面的勾选取消掉
在File > ****Project Structure > ****Project > Signing Configs ****> default界面中，取消“Automatically generate signature”勾选项，然后配置工程的签名信息。

Store File：选择密钥库文件，文件后缀为 .p12。
Store Password：输入密钥库密码。
Key Alias：输入密钥的别名信息。 忘记请重新操作。
Key Password：输入密钥的密码。
Sign Alg：签名算法，固定为 SHA256withECDSA。
Profile File：选择申请的发布Profile文件，文件后缀为 .p7b。
Certpath File：选择申请的发布数字证书文件，文件后缀为 .cer。

完事以后记得在 AppGallery Connect中API管理中把地图服务打开

配置Client ID

1.登录AppGallery Connect平台，在“我的项目”中选择目标应用，获取“项目设置 > 常规 > 应用”的Client ID。
2.

添加公钥指纹
3.在 Entry 中 module.json5新增metadata把刚刚的Client ID填入到value中

复制以下官方案例代码，看地图是否能正常在真机中运行：

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

@Entry
@Component
struct HuaweiMapDemo {
  private TAG = "HuaweiMapDemo";
  private mapOption?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;

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

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;
        this.mapController.on("mapLoad", () => {
          console.info(this.TAG, `on-mapLoad`);
        });
      }
    };
  }

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

完成上述操作就可以在真机调用出地图了，如果无法加载图片的话：

无法加载地图

现象描述

无法加载地图。
可能原因

1.无网络。
2.未完成基本准备工作及指纹配置。
3.未配置Client ID。
4.地图权限未开通。

处理步骤

1.请检查网络状态。

2.请参考“应用开发准备”检查是否完成基本准备工作及指纹配置。

3.请参考配置Client ID检查是否配置Client ID。

4.请参考开通地图服务检查AppGallery Connect网站上是否开通地图权限。权限开通存在延迟，如未生效，请稍后重试。

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。