鸿蒙地图功能开发【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），那么基础的地图实现就算完成了