鸿蒙（Harmony）集成高德地图

引言

随着鸿蒙系统的不断发展，越来越多的应用开始选择在其平台上部署。为了提升用户体验，开发者常常需要集成地图功能。高德地图作为国内主流的地图服务提供商之一，其丰富的API和稳定的性能受到了广大开发者的青睐。本文将详细介绍如何在鸿蒙应用中实现高德地图功能，帮助开发者快速上手。

前提条件 在开始之前，请确保你已经具备以下条件：

已经创建了鸿蒙应用。

在高德开放平台上注册并创建了应用，获取到了AppKey。

了解鸿蒙开发的基本知识。

进入正题

获取应用的appId：

这个appId主要用于申请高德的apiKey，请确定最终发布应用的appId, 防止最终高德SDK鉴权失败。 目前只能通过代码获取应用的appId，具体代码请参考如下代码

let flag = bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_SIGNATURE_INFO;
let bundleInfo = bundleManager.getBundleInfoForSelfSync(flag)
let appId = bundleInfo.signatureInfo.appId;

最终获取的appId格式类似于：com.amap.demo_BGtGgVB3ASqU7ar1nHkwX4s0nIexDbEwqNrVoatUDs17GrClWC7V2/zhoYh6tFQHAd5DASWVTEAgvZfzrEGljjs=

申请高德API Key: 具体获取key的步骤请参考 获取key

在代码中设置申请的Key: 请使用api的方式将申请的高德api key设置给高德导航SDK。

//申请地址：https://console.amap.com/dev/key/app，appId在日志中过滤即可获取
const appkey = '你申请的 Key'
this.naviInstance = AMapNaviFactory.getAMapNaviInstance(getContext().getApplicationContext(), appkey)

基础功能 第一步，配置module.json5 首先，声明权限

...
"requestPermissions": [
      {
        "name": "ohos.permission.APPROXIMATELY_LOCATION",
        "reason": "$string:Harmony_navi_permission_reason",
        "usedScene": {
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.LOCATION",
        "reason": "$string:Harmony_navi_permission_reason",
        "usedScene": {
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.LOCATION_IN_BACKGROUND",
        "reason": "$string:Harmony_navi_permission_reason",
        "usedScene": {
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:Harmony_navi_permission_reason",
        "usedScene": {
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.KEEP_BACKGROUND_RUNNING",
        "reason": "$string:Harmony_navi_permission_reason",
        "usedScene": {
          "when": "always"
        }
      }
    ]

向工程中添加导航开发包

"dependencies": {
    "@amap/amap_lbs_common": ">=1.1.0",
    "@amap/amap_lbs_location": ">=1.1.0",
    "@amap/amap_lbs_navi": ">=2.1.0"
}

使用实例 1、首先，创建导航单例，并设置Key

AMapNaviFactory.getAMapNaviInstance(getContext().getApplicationContext(), appkey)

2、然后，添加导航组件

build() {
    NavDestination() {
      AMapNaviComponent({
        appCustomerConfig: {
          mType: AmapNaviType.Driver, //引擎类型（驾车、骑行、步行）。当前支持驾车、货车、摩托车
          //默认模拟导航
          // mNaviType: NaviType.EMULATOR,
          //实时导航
          mNaviType: NaviType.GPS,
          start: {
            coordinate: this.startLatLng
          }, //起点
          end: {
            coordinate: this.endLatLng
          }, //终点
          // wayPoints: this.wayPoints, //途经点
          mRouteStrategy: 10, //设置默认规划路线策略
          serviceAreaDetailsEnable: true, //服务区信息
          goBack: () => {
            this.goback()
          },
        }
      })
    }.title('导航组件')
    .hideTitleBar(true)
    .onBackPressed(() => {
      this.goback()
      return true
    })
  }

3、最后，添加导航监听，监听回调中开始算路、导航

let listener: IAMapNaviListener = {
      onInitNaviFailure: this.onInitNaviFailure,
      onInitNaviSuccess: this.onInitNaviSuccess,
      onStartNavi: this.onStartNavi,
      onTrafficStatusUpdate: this.onTrafficStatusUpdate,
      onLocationChange: this.onLocationChange,
      onGetNavigationTextAndType: this.onGetNavigationTextAndType,
      onEndEmulatorNavi: this.onEndEmulatorNavi,
      onArriveDestination: this.onArriveDestination,
      onReCalculateRouteForYaw: this.onReCalculateRouteForYaw,
      onReCalculateRouteForTrafficJam: this.onReCalculateRouteForTrafficJam,
      onArrivedWayPoint: this.onArrivedWayPoint,
      onGpsOpenStatus: this.onGpsOpenStatus,
      onNaviInfoUpdate: this.onNaviInfoUpdate,
      updateCameraInfo: this.updateCameraInfo,
      updateIntervalCameraInfo: this.updateIntervalCameraInfo,
      onServiceAreaUpdate: this.onServiceAreaUpdate,
      showCross: this.showCross,
      hideCross: this.hideCross,
      showModeCross: this.showModeCross,
      hideModeCross: this.hideModeCross,
      showLaneInfo: this.showLaneInfo,
      hideLaneInfo: this.hideLaneInfo,
      notifyParallelRoad: this.notifyParallelRoad,
      // OnUpdateTrafficFacility: this.OnUpdateTrafficFacility,
      onPlayRing: this.onPlayRing,
      onTTSIsPlaying: this.onTTSIsPlaying,
      onCalculateRouteSuccess: this.onCalculateRouteSuccess,
      onCalculateRouteFailureForResult: this.onCalculateRouteFailureForResult,
      onNaviRouteNotify: this.onNaviRouteNotify,
      onUpdateGPSSignalStrength: this.onUpdateGPSSignalStrength,
    }
    this.listener = listener
    //添加导航事件回调监听。
    this.naviInstance.addAMapNaviListener(this.listener)