HarmonyOS 地图中如何渲染多个marker

相应在地图中实现多个marker的效果,存在多个maker,每个maker的icon不同,且marker上会有动态文案 但是现在官方api好像不支持,只能设置一个maker,如果用气泡,必须设置四个方向的,不符合现在需求 请问下,有没有好的解决方案

HarmonyOS
2024-12-19 15:46:31
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可以添加多个Marker,使用MapComponentController.addMarker接口,返回添加的marker实例 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/map-map-V5#section0810361284

marker自定义信息窗,请参考链接https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/map-marker-V5

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

@Entry
@Component
struct MarkerDemo {
  private TAG = "OHMapSDK_MarkerDemo";
  private mapOption?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;

  aboutToAppear(): void {
    this.mapOption = {
      position: {
        target: {
          latitude: 32.120750,
          longitude: 118.788765
        },
        zoom: 15
      }
    }

    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        let markerOptions: mapCommon.MarkerOptions = {
          position: {
            latitude: 32.120750,
            longitude: 118.788765
          },
          clickable: true,
          // 设置信息窗标题
          title: "自定义信息窗",
        };
        await this.mapController?.addMarker(markerOptions);
      }
    }
  }

  build() {
    Stack() {
      Column() {
        MapComponent({
          mapOptions: this.mapOption,
          mapCallback: this.callback,
          // 自定义信息窗
          customInfoWindow: this.customInfoWindow
        })
          .width('100%')
          .height('100%');
      }.width('100%')
    }.height('100%')
  }

  // 自定义信息窗BuilderParam
  @BuilderParam customInfoWindow: ($$: map.MarkerDelegate) => void = this.customInfoWindowBuilder;

  // 自定义信息窗Builder
  @Builder
  customInfoWindowBuilder($$: map.MarkerDelegate) {
    if ($$.marker) {
      Text($$.marker.getTitle())
        .width("50%")
        .height(50)
        .backgroundColor(Color.Green)
        .textAlign(TextAlign.Center)
        .fontColor(Color.Black)
        .font({ size: 25, weight: 10, style: FontStyle.Italic })
        .border({
          width: 3,
          color: Color.Black,
          radius: 25,
          style: BorderStyle.Dashed
        })

    }
  }
}
分享
微博
QQ
微信
回复
2024-12-19 17:58:53
相关问题
HarmonyOS 地图中是否支持海量marker
1408浏览 • 1回复 待解决
HarmonyOS 地图添加marker
808浏览 • 1回复 待解决
HarmonyOS 地图自定义marker
1031浏览 • 1回复 待解决
HarmonyOS 地图组件里marker固定位置
1009浏览 • 1回复 待解决
HarmonyOS map kit 获取地图中心经纬度
1472浏览 • 1回复 待解决
HarmonyOS 添加marker
762浏览 • 1回复 待解决
HarmonyOS 如何去除如图中的间隙
1075浏览 • 1回复 待解决
HarmonyOS 如何实现图中的input控件效果
1200浏览 • 1回复 待解决
HarmonyOS 想要实现图中这样的UI
1189浏览 • 1回复 待解决
HarmonyOS marker无设置图片大小问题
809浏览 • 1回复 待解决
HarmonyOS 如何压缩本地图片?
1058浏览 • 1回复 待解决