HarmonyOS 鸿蒙Next 地图map上添加了多个marker,如何设置才能全部展示在地图的可见区域内

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 地图map上添加了多个marker,如何设置才能全部展示在地图的可见区域内

地图map上添加了多个marker标记,如何设置才能全部展示在地图的可见区域内?

4 回复

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

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

demo如下:

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
        })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 地图map上添加了多个marker,如何设置才能全部展示在地图的可见区域内的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你这个没法调整地图的可见范围,使所有添加的marker标记都能在当前的窗口展示出来

在HarmonyOS鸿蒙Next系统中,若想在地图(map)上添加多个marker并确保它们全部展示在地图的可见区域内,可通过以下步骤实现:

  1. 获取所有Marker的经纬度:首先,确保你已经获取了所有marker的经纬度信息。

  2. 计算边界框:使用这些经纬度信息计算出一个包含所有marker的最小边界框(Bounding Box),即获取这些点构成的矩形区域的左上角和右下角坐标。

  3. 调整地图视野:利用地图组件提供的API,如setCameraBounds或类似功能,将地图视野调整到这个边界框内。这样,地图会自动缩放和平移,以确保所有marker都在可视区域内。

  4. 刷新地图:调用地图组件的刷新方法,确保更改生效。

示例代码(伪代码):

// 假设markers是经纬度数组
let bounds = mapUtils.calculateBounds(markers); // 计算边界框
mapComponent.setCameraBounds(bounds); // 设置地图视野到边界框
mapComponent.refresh(); // 刷新地图

注意,具体API名称和调用方式需参考HarmonyOS官方文档,因为不同版本可能有所差异。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部