开发者技术支持——HarmonyOS MapKit地图不显示
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监听 |
回调函数绑定 |
- 点赞
- 收藏
- 关注作者
评论(0)