华为HarmonyOS地图服务 14 -- 如何为地图增加覆盖物？

场景介绍

地图覆盖物是固定在地图上的图片，本章节将向您介绍如何为地图增加覆盖物。

接口说明

增加覆盖物功能主要由MapComponentController的addImageOverlay方法实现。

接口名	描述
ImageOverlayParams	覆盖物参数。
addImageOverlay(params: mapCommon.ImageOverlayParams): Promise<ImageOverlay>	为地图增加覆盖物。
ImageOverlay	更新和查询覆盖物。

开发步骤

1. 导入相关模块。

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

2. 增加覆盖物。

   @Entry
   @Component
   struct ImageOverlayDemo {
   private mapOption?: mapCommon.MapOptions;
   private mapController?: map.MapComponentController;
   private callback?: AsyncCallback<map.MapComponentController>;
   aboutToAppear(): void {
   this.mapOption = {
   position: {
   target: {
   latitude: 32.2,
   longitude: 118.2
   },
   zoom: 10
   }
   }
   this.callback = async (err, mapController) => {
   if (!err) {
   this.mapController = mapController;
   let imageOverlayParams: mapCommon.ImageOverlayParams = {
   // 覆盖物范围
   bounds: {
   southwest: { latitude: 32, longitude: 118 },
   northeast: { latitude: 32.4, longitude: 118.4 }
   },
   // 覆盖物图片
   image: 'icon/icon.png',
   transparency: 0.3,
   zIndex: 101,
   anchorU: 0.5,
   anchorV: 0.5,
   clickable: true,
   visible: true,
   bearing: 0
   };
   // 添加覆盖物
   let imageOverlay = await this.mapController?.addImageOverlay(imageOverlayParams);
   }
   }
   }
   build() {
   Stack() {
   Column() {
   MapComponent({
   mapOptions: this.mapOption,
   mapCallback: this.callback,
   })
   .width('100%')
   .height('100%');
   }.width('100%')
   }.height('100%')
   }
   }

3. 设置覆盖物点击监听事件。

   let imageOverlayCallback: Callback<map.ImageOverlay> = (imageOverlay:map.ImageOverlay) => {
   console.info("imageOverlay:" + imageOverlay?.getId());
   }
   // 打开覆盖物的点击监听
   this.mapController.on("imageOverlayClick", imageOverlayCallback)
   // 关闭覆盖物的点击监听
   this.mapController.off("imageOverlayClick",imageOverlayCallback);