HarmonyOS MapKit 保姆级示例——1、显示地图

本文链接：https://blog.youkuaiyun.com/feng8403000/article/details/148972735

前言

HarmonyOS的地图是一个非常重要的功能，其具体的API名称为MapKit，其具体连接为：HarmonyOS MapKit 具体API地址我这里也是通过这个API进行学习的，但是API中有很多省略的地方，我们需要进行具体的实操，只有操作过一次才能真正的了解其整个过程，把过程中的各种坑都能填的上，否则在真正的开发过程中肯定会出现各种异常的，我这里就是为大家提前踩了坑的，希望本文能有一定的价值，为大家节约更多的时间。

前置配置

DevEco Studio真机调试完整方法演示——保姆级(HUAWEI nova 14演示机)-优快云博客

完整操作流程

1、配置签名

需要点击菜单上面的【Build】选择【Generate Key and CSR】。

完成后点击红色选框包裹的New按钮字样。

按照提示选择存储名称与位置，并输入对应的pwd两次。

输入一下Alias名称，然后点击【Next】。

继续选择CSR文件存储位置。

点击Finish后可以看到的效果。

去对应的文件夹确认创建成功：

2、申请数字证书

地址：https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/harmonyOSDevPlatform/9249519184596237889

新增证书操作

下载证书

下载到本地

3、APPID

这里就是你的项目对应的ID所以创建一个就会有，这里要开通地图功能。

匹配包名

·可以看到两个包名是相互匹配的。

注：需要打开地图服务功能

4、创建Profile文件

位置：

添加设备

相对路径：DevEco Studio\sdk\default\openharmony\toolchains

使用cmd打开这个目录并运行：hdc shell bm get --udid

添加到设备

添加成功

添加信息

下载Profile

对应下载的文件：

5、整体联动配置

打开项目的结构

添加签名

逐一输入信息

获取指纹信息

复制下来。

82:CE:CE:76:59:BB:CC:8B:44:E2:55:7E:6E:B0:F6:F9:7D:E2:FE:4E:8D:CF:24:57:F3:6D:14:5F:35:12:43:93

添加指纹

6、记录Client ID

这里复制保存一下。

添加到配置中

7、添加index.ets代码

代码块

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);


        // 执行自定义的方法
        this.customizedMethod();
      }
    };
  }


  // 自定义的方法
  private customizedMethod() {
    // ...
  }


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

运行到真机效果：

效果：

总结

操作一定要细致，我第一没有成功，就是签名没搞明白，后来又搞了2次最终把这个流程呈现给大家，希望能给大家创造一定的价值，地图还是非常有用的东西，未来的很长时间我都会跟地图来打交道，这个过程我也会持续的输出我的完全通过测试的博客文章，持续的来创造更多的价值。

地图配置流程示例

以下为完整的地图配置流程概览，采用Markdown表格形式呈现：

步骤	操作内容	关键配置项	备注
1	申请API密钥	开发者平台注册、获取Key	需实名认证
2	引入地图库	引入地图库	指定版本号
3	创建容器	设置width/height样式	需固定尺寸
4	初始化实例	center, zoom, projection	坐标系类型
5	添加控件	Zoom, Scale, Toolbar	按需加载
6	设置图层	TileLayer, VectorLayer	WMTS/WMS配置
7	交互事件	click, moveend监听	回调函数绑定