鸿蒙原生地图调用

317 阅读3分钟

## 地图服务(Map Kit)

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

生成签名证书指纹:

  • p12 文件
  • csr 文件

按照步骤

image.png

image.png

image.png

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

image.png

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

image.png 国家写一下 然后下一步

image.png

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

image.png

文件夹这样是ok的,继续。。。

AGC 申请调试证书 .cer

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

image.png

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

image.png 进入 AppGallery Connect 点击用户与访问

image.png 点击新增证书

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

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

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

image.png 完事之后点添加 Profile

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

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

image.png 右上角

image.png 点击 把后面的勾选取消掉

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

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

image.png

配置Client ID

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

image.png 添加公钥指纹

3.在 Entry 中 module.json5新增metadata把刚刚的Client ID填入到value中

image.png

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

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网站上是否开通地图权限。权限开通存在延迟,如未生效,请稍后重试。

overover!! ^-^