鸿蒙地图功能开发【3. 代码开发】##地图开发##
在完成了前期准备工作之后,就可以正式进入到代码开发的工作中,在官方文档中,相关的代码是很全的,从支持的功能上来看,相比于三方SDK更加全面。
基本项目中包含的地图展示、marker、路径规划等都是包括的
那么最基本的就是先展示地图
首先是导入Map Kitk的相关模块
import { MapComponent, mapCommon, map } from '@kit.MapKit'; import { AsyncCallback } from '@kit.BasicServicesKit';
然后定义一些基础的变量并在aboutToAppear里初始化
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);
}
};
}
最后就是在页面中显示这个地图
build() { Stack() { // 调用MapComponent组件初始化地图 MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%'); }.height('100%') }
虽然从官网上看,这个代码是非常简单的,但是里面有两个很大的坑是要注意的
第一,地图展示的时候,这个配置参数this.mapOptions在初始化的时候是要填入坐标的,如果你的坐标不是写死的,是通过后端或者其他方式异步获取的话,最好在MapComponent外面包一层if,例如if(this.lat != ""),即当你获取到数据以后再去展示地图。或者先给地图设置一个默认的写死的中心点,等获取到数据以后再去更新这个配置参数。
第二,一定要注意经纬度坐标的坐标系。从大家的惯性认知中,既然我是通过原生鸿蒙的Location Kit获取的经纬度坐标,那么当然适用于原生鸿蒙的Map Kit的地图咯。我最近在开发地图相关功能的时候也是这个想法。我最近做的项目是类似于校园配送的app,下单的用户需要去查看配送员的实时位置。配送员的app负责定位,用户的app上查看地图,测试的时候发现,不管我如何调整定位的精度问题和定位的策略,其在配送员app上展示的位置永远是错误的,距离实际位置大概偏差了有1公里多,当时看了很多的代码样例(主要是定位的样例,我一直以为是定位的错误),都找不出问题。最后在大佬的提点下,看了一下文档对于坐标系的说法:
其中定位是这么说的:“本模块能力仅支持WGS-84坐标系”,地图是这么说的“华为地图在中国大陆使用GCJ02坐标系,若使用WGS84坐标系直接叠加在华为地图上,因坐标值不同,展示位置会有偏移。所以,在中国大陆如果使用WGS84坐标调用Map Kit服务,需要先将其转换为GCJ02坐标系再访问。”
所以,如果你使用的是原生鸿蒙的定位能力,那么获取的坐标在地图显示的时候,需要先转成GCJ02坐标系!
代码如下:
let wgs84Position: mapCommon.LatLng = { latitude: 30, longitude: 118 }; // 转换经纬度坐标 let gcj02Position: mapCommon.LatLng = map.convertCoordinateSync(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, wgs84Position);
而且这个说明,是在“地图计算工具” -- “坐标转换”中看到的,其他地图相关文档位置并未看到相关的提醒,这对于开发者其实是不友好的。
最后实现的效果如下(我还加了个marker),那么基础的地图实现就算完成了
- 0回答
- 0粉丝
- 0关注
- 鸿蒙地图功能开发【1. 开发准备】##地图开发##
- 鸿蒙地图功能开发【2. 申请Profile文件】##地图开发##
- 鸿蒙隐私弹窗功能开发实践
- 开发者工具箱-鸿蒙设备信息功能开发实践
- 开发者工具箱-鸿蒙电池监控功能开发实践
- 开发者工具箱-鸿蒙懒加载功能开发笔记
- HarmonyOS NEXT 地图服务中‘我的位置’功能全解析
- HarmonyOS 地图服务:深度解析其丰富功能与精准导航实力
- (二七)ArkTS 地图与定位开发
- 鸿蒙开发Hvigor插件动态生成代码
- 鸿蒙开发:DevEcoStudio中的代码生成
- 鸿蒙开发:实现AOP代码插桩能力
- (二十)ArkTS 与低代码 / 无代码开发
- 鸿蒙运动开发:计算户外运动步频与步幅,与地图路线绘制
- 「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置