鸿蒙地图功能开发【3. 代码开发】##地图开发##

2025-05-21 23:49:30
122次阅读
0个评论

​ 在完成了前期准备工作之后,就可以正式进入到代码开发的工作中,在官方文档中,相关的代码是很全的,从支持的功能上来看,相比于三方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),那么基础的地图实现就算完成了

微信图片_20250521234403.jpg

收藏00

登录 后评论。没有帐号? 注册 一个。