开发者技术支持——HarmonyOS MapKit地图不显示

举报
yd_262781458 发表于 2025/09/02 11:19:05 2025/09/02
【摘要】 1.问题说明:HarmonyOS MapKit地图不显示;HarmonyOS的地图是一个非常重要的功能,其具体的API名称为MapKit,其具体连接为:HarmonyOS MapKit 具体API地址 我这里也是通过这个API进行学习的,但是API中有很多省略的地方,我们需要进行具体的实操,只有操作过一次才能真正的了解其整个过程,把过程中的各种坑都能填的上,否则在真正的开发过程中肯定会出现各...

1.问题说明:

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

2.原因分析

(1)签名配置有问题 

(2)未申请数字证书

(3)未开通地图功能

3.解决思路

(1)检查签名配置有问题 

(2)申请数字证书

(3)开通地图功能

4.解决方案:描述实施的核心解决方案


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


完整操作流程

​(1)配置签名

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


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


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


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




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


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


2、申请数字证书





新增证书操作



下载证书


下载到本地



3、APPID

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



匹配包名



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

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



4、创建Profile文件

位置:


添加设备

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

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


添加到设备



添加成功




添加信息


对应下载的文件:


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监听

回调函数绑定





【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。