HarmonyOS 地图MapComponent的标记Marker无法设置大小?

使用MapComponent组件,在mapCallback回调中添加marker,大头针太大,无法设置大小。

阅读 516
1 个回答

参考demo:

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

@Entry
@Component
struct AddMarker {
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  @State imagePixelMap: PixelMap | undefined = undefined;

  getMarkerPixelMap() {
    getContext(this).resourceManager.getMediaContent($r("app.media.startIcon")).then((data) => {
      let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset)
      let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);
      imageSource.getImageInfo((err, value) => {
        //获取图片资源的尺寸
        console.log('testTag',`图片的尺寸为:width:${value.size.width}height:${value.size.height}`)
        if (err) {return;}
        //转PixelMap,也可以在这个里面设置宽和高,比如下面是在原有的宽高基础上放大5倍
        let opts: image.DecodingOptions =
          { editable: true, desiredSize: { height: value.size.height*5, width: value.size.width*5 } };
        imageSource.createPixelMap(opts, (err,
          pixelMap) => {
          console.log('testTag', `createPixelMap`)
          this.imagePixelMap = pixelMap
          this.addMarker()
        })
      })
    })
  }
  addMarker() {
    // Marker初始化参数
    let markerOptions: mapCommon.MarkerOptions = {
      position: {
        latitude: xxx,
        longitude: xxx
      },
      rotation: 0,
      visible: true,
      zIndex: 0,
      alpha: 1,
      anchorU: 0.5,
      anchorV: 1,
      clickable: true,
      draggable: true,
      flat: false,
      icon:this.imagePixelMap
    };
    console.log('testTag', `addMarker`)
    this.mapController?.addMarker(markerOptions);
  }
  aboutToAppear(): void {
    // 地图初始化参数
    this.mapOptions = {
      position: {
        target: {
          latitude: xxx,
          longitude: xxx
        },
        zoom: 15
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        console.log('testTag', `callback`)
        this.mapController = mapController;
        this.getMarkerPixelMap()
      }
    };
  }
  build() {
    Stack() {
      Column() {
        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
      }.width('100%')
    }.height('100%')
  }
}