HarmonyOS鸿蒙Next地图多信息窗实现

HarmonyOS鸿蒙Next地图多信息窗实现 目前HarmonyOSSDK中地图服务提供的信息窗能力只针对单marker，针对多marker场景目前没有规划，依赖地图服务的现有能力，可以不依赖地图服务的信息窗能力实现多信息窗。

export class InfoWindowOptions {
  positionX:number = 0;
  positionY:number = 0;
}

import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
import { InfoWindowOptions } from './dto/InfoWindowOptions';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct BasicMapDemo {
  private TAG = "OHMapSDK_BasicMapDemo";
  @State resultText: string = "result";
  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  @State infoWindowOptions: InfoWindowOptions = new InfoWindowOptions();
  @State show: boolean = false;
  private infoAnchorU: number = 0.5; // 信息窗X轴的偏移
  private infoAnchorV: number = 0; // 信息窗Y轴的偏移

  aboutToAppear(): void {
    let target: mapCommon.LatLng = {
      latitude: 31.984410259206815,
      longitude: 118.76625379397866
    }

    let cameraPosition: mapCommon.CameraPosition = {
      target: target,
      zoom: 15
    }
    this.mapOptions = {
      position: cameraPosition
    }

    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        try {
          // 获取图片资源并转成 PixelMap
          let mContext = getContext();
          const fileData: Uint8Array = await mContext?.resourceManager?.getMediaContent($r('app.media.icon'));
          let imageSource: image.ImageSource =
            image.createImageSource(fileData.buffer.slice(0, fileData.buffer.byteLength));
          let pixelMap: PixelMap = await imageSource.createPixelMap();

          let markerOptions: mapCommon.MarkerOptions = {
            position: {
              latitude: 31.984410259206815,
              longitude: 118.76625379397866
            },
            icon: pixelMap
          }
          const imageInfo: image.ImageInfo = await pixelMap.getImageInfo();
          let marker = await this.mapController.addMarker(markerOptions);
          let point: mapCommon.MapPoint = this.mapController.getProjection().toScreenLocation(marker.getPosition());
          this.infoWindowOptions.positionX = point.positionX - imageInfo.size.width * (0.5 - this.infoAnchorU);
          this.infoWindowOptions.positionY = point.positionY - imageInfo.size.height * (1 - this.infoAnchorV);
          this.show = true;
          this.mapController.on('cameraMove', () => {
            if (this.mapController) {
              let point: mapCommon.MapPoint = this.mapController.getProjection().toScreenLocation(marker.getPosition());
              this.infoWindowOptions.positionX = point.positionX - imageInfo.size.width * (0.5 - this.infoAnchorU);
              this.infoWindowOptions.positionY = point.positionY - imageInfo.size.height * (1 - this.infoAnchorV);
            }
          })
        } catch (e) {
          console.error('20250516 test error')
        }
      }
    }
  }

  build() {
    Stack() {
      Column() {
        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
          .width('100%')
          .height('100%');
      }.width('100%')

      Column() {
        Text('20250516 test')
          .width(200)
          .height(40)
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
      }.position(
        {
          x: px2vp(this.infoWindowOptions.positionX),
          y: px2vp(this.infoWindowOptions.positionY)
        })
      .markAnchor( //设置信息窗在position的锚点，以信息窗左上角作为基准点进行偏移
        {
          x: '50%',
          y: '100%'
        }).visibility(this.show ? Visibility.Visible : Visibility.Hidden)
    }.height('100%')
  }
}