华为地图--

---

前言

Map Kit（地图服务）为开发者提供强大而便捷的地图能力，助力全球开发者实现个性化显示地图、位置搜索和路径规划等功能，轻松完成地图构建工作。您可以轻松地在HarmonyOS应用/元服务中集成地图相关的功能，全方位提升用户体验。

---

一、Map Kit（地图服务）

Map Kit 提供以下功能，满足绝大多数地图开发的需求：

创建地图：呈现内容包括建筑、道路、水系等。
地图交互：控制地图的交互手势和交互按钮。
在地图上绘制：添加位置标记、覆盖物以及各种形状等。
位置搜索：多种查询Poi信息的能力。
路径规划：提供驾车、步行、骑行路径规划能力。
静态图：获取一张地图图片。
地图Picker：提供地点详情展示控件、地点选取控件、区划选择控件。通过Petal 地图应用实现导航等能力：查看位置详情、查看路径规划、发起导航、发起内容搜索。
地图计算工具：华为地图涉及的2种坐标系及其使用区域和转换。

二、具体实现

1. 创建地图

如果需要在自己的应用中使用地图组件相关功能，需要现在 AppGallery Connect 平台【开通相关权限】

利用的组件：MapComponent 地图组件，用于在您的页面中放置地图。
代码如下（示例）：

1.1 导入Map Kit相关模块

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

1.2 新建地图初始化参数 mapOptions，设置地图中心点坐标及层级

通过callback回调的方式获取MapComponentController对象，用来操作地图。

  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
      },
       scrollGesturesEnabled: true,
       rotateGesturesEnabled: true,
       dayNightMode: 2  //2--打开系统深色开关，显示夜间模式，否则显示日间模式。
                       //0--日间模式 / 1--深色模式 
    };

    // 地图初始化的回调
    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);
      }
    };

1.3 调用MapComponent组件，传入mapOptions和callback参数，初始化地图

build() {
    Stack() {
      // 调用MapComponent组件初始化地图
      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
      .width('100%')
      .height('100%')
    }
    .height('100%')

2.设置地图属性

MapOptions常用的属性如下，具体属性可见 链接

属性	描述
mapType	地图类型，默认值：MapType.STANDARD。
position	地图相机位置。
bounds	地图展示框。
rotateGesturesEnabled	是否支持旋转手势，默认值：true。
scrollGesturesEnabled	是否支持滑动手势，默认值：true。
mapType	地图类型，默认值：MapType.STANDARD。
mapType	地图类型，默认值：MapType.STANDARD。

3. 绘制折线 & 绘制标记点

代码如下（示例）：

  private mapEventManager?: map.MapEventManager;
  private mapPolyline?: map.MapPolyline;


   // 绘制折线
   // polyline初始化参数
        let polylineOption: mapCommon.MapPolylineOptions = {
          points: [
            { longitude: 116.4, latitude: 39.9 },
            { longitude: 116.5, latitude: 40.1 },
            { longitude: 87.640949, latitude: 43.831917 }
          ],
          clickable: true,
          startCap: mapCommon.CapStyle.BUTT,
          endCap: mapCommon.CapStyle.BUTT,
          geodesic: false,
          jointType: mapCommon.JointType.BEVEL,
          visible: true,
          width: 10,
          zIndex: 10,
          gradient: false,
          color: 0xffff0000
        }
        // 创建polyline
        this.mapPolyline = await this.mapController.addPolyline(polylineOption);

        // 绘制标记点
        let markerOptions: mapCommon.MarkerOptions = {
          position: { longitude: 116.4, latitude: 39.9 },
          rotation: 0,
          visible: true,
          zIndex: 0,
          alpha: 1,
          anchorU: 0.5,
          anchorV: 1,
          clickable: true,
          draggable: true,
          flat: false
        };
        // 创建Marker
        await this.mapController.addMarker(markerOptions);

        let markerOptions1: mapCommon.MarkerOptions = {
          position: { longitude: 87.640949, latitude: 43.831917 },
          rotation: 0,
          visible: true,
          zIndex: 0,
          alpha: 1,
          anchorU: 0.5,
          anchorV: 1,
          clickable: true,
          draggable: true,
          flat: false
        };
        // 创建Marker
        await this.mapController.addMarker(markerOptions1);

---

总结

以上就是华为地图在开发中的基本使用，一些更具体的用法还是要看 API 来实现。
链接： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/map-kit-guide-V5