HarmonyOS 地图组件里marker固定位置

这边可以尝试下使用stack布局，在地图组件上叠一个marker样式。

参考如下demo：

import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
// 1、导入文件
import display from '@ohos.display'

@Entry
@Component
struct Index3 {
  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  @State screenWidth: number = 0
  @State screenHeight: number = 0

  aboutToAppear(): void {
    // 初始化图标
    // 地图初始化参数，设置地图中心点坐标及层级
    let target: mapCommon.LatLng = {
      latitude: 39.9181,
      longitude: 116.3970193
    };
    let cameraPosition: mapCommon.CameraPosition = {
      target: target,
      zoom: 15
    };
    this.mapOptions = {
      position: cameraPosition
    };

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
      }
    }

    display.getAllDisplays((err, data) => {
      let screenWidth: number = data[0].width
      let screenHeight: number = data[0].height
      console.log('width = ' + screenWidth + 'height = ' + screenHeight)
      console.log('width + height = ' + JSON.stringify(data))
    })
  }

  build() {
    Stack() {
      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%')
      marker().position({ x: "44%", y: "25%" })
    }
  }
}

@Component
struct marker {
  build() {
    Column({ space: 5 }) {
      Image($r('app.media.xxx')).width(50)
      Text("xxxx")
    }
    .width(50).height(50)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.