HarmonyOS鸿蒙Next中地图点标记

1. 批量添加标记（推荐）

使用 addMarkers() 方法替代 addMarker()，可以一次性添加多个标记，避免逐个跳出的问题。

import { ArrayList } from '@kit.ArkTS';
import { LatLng, MarkerOptions, BitmapDescriptor } from '@amap/amap-harmony-map';

// 创建标记选项列表
let markerOptionsList: ArrayList<MarkerOptions> = new ArrayList<MarkerOptions>();

// 准备多个点位数据
const locations = [
  { lat: 39.992520, lng: 116.336170, title: '标记1' },
  { lat: 40.023801, lng: 116.431245, title: '标记2' },
  { lat: 39.985263, lng: 116.425632, title: '标记3' },
  // ... 更多点位
];

// 创建自定义图标（复用同一个 BitmapDescriptor 可以节省内存）
let customIcon = new BitmapDescriptor(
  $rawfile('custom_marker_icon.png'),
  'custom_marker',
  100,
  100
);

// 批量创建 MarkerOptions
locations.forEach(location => {
  let options = new MarkerOptions()
    .setPosition(new LatLng(location.lat, location.lng))
    .setTitle(location.title)
    .setIcon(customIcon);  // 复用同一个图标对象
  markerOptionsList.add(options);
});

// 一次性批量添加所有标记（第二个参数 false 表示不移动相机）
let markers = this.aMap.addMarkers(markerOptionsList, false);
// 保存返回的 markers 数组，方便后续删除
this.markerList = markers;

1. 清除点标记的多种方法

方法 1: 逐个删除标记（推荐）

// 保存添加的标记列表
private markerList: Array<Marker> = [];

// 清除所有标记
clearAllMarkers() {
  if (this.markerList && this.markerList.length > 0) {
    this.markerList.forEach(marker => {
      this.aMap.removeOverlay(marker.getId());
    });
    this.markerList = []; // 清空数组
  }
}

// 删除单个标记
removeMarker(marker: Marker) {
  this.aMap.removeOverlay(marker.getId());
  // 从数组中移除
  const index = this.markerList.indexOf(marker);
  if (index > -1) {
    this.markerList.splice(index, 1);
  }
}

方法 2: 清除地图上所有覆盖物

// 清除地图上的所有覆盖物（包括 marker、polyline、polygon 等）
clearMap() {
  this.aMap.clear();
  this.markerList = [];
}

clear() 方法会清除地图上的所有覆盖物，不仅仅是标记。

1. 完整示例代码

import { ArrayList } from '@kit.ArkTS';
import { LatLng, MarkerOptions, BitmapDescriptor, Marker, AMap } from '@amap/amap-harmony-map';

@Component
export struct MapComponent {
  private aMap?: AMap;
  private markerList: Array<Marker> = [];
  private customIcon?: BitmapDescriptor;

  // 初始化自定义图标
  async initCustomIcon() {
    this.customIcon = new BitmapDescriptor(
      $rawfile('location_icon.png'),
      'location_icon',
      80,  // 宽度
      80   // 高度
    );
  }

  // 批量添加标记
  async addMarkersInBatch(locations: Array<{lat: number, lng: number, title: string}>) {
    // 先清除旧的标记
    this.clearAllMarkers();
    // 确保图标已初始化
    if (!this.customIcon) {
      await this.initCustomIcon();
    }
    let markerOptionsList: ArrayList<MarkerOptions> = new ArrayList<MarkerOptions>();
    // 创建所有 MarkerOptions
    locations.forEach(location => {
      let options = new MarkerOptions()
        .setPosition(new LatLng(location.lat, location.lng))
        .setTitle(location.title)
        .setSnippet('详细信息')  // 可选
        .setIcon(this.customIcon!)  // 使用自定义图标
        .setDraggable(false);  // 是否可拖拽
      markerOptionsList.add(options);
    });
    // 批量添加（第二个参数 false 表示不移动相机到第一个标记）
    this.markerList = this.aMap!.addMarkers(markerOptionsList, false);
    console.info(`成功添加 ${this.markerList.length} 个标记`);
  }

  // 清除所有标记
  clearAllMarkers() {
    if (this.markerList && this.markerList.length > 0) {
      this.markerList.forEach(marker => {
        this.aMap?.removeOverlay(marker.getId());
      });
      this.markerList = [];
      console.info('已清除所有标记');
    }
  }

  // 删除指定索引的标记
  removeMarkerAtIndex(index: number) {
    if (index >= 0 && index < this.markerList.length) {
      const marker = this.markerList[index];
      this.aMap?.removeOverlay(marker.getId());
      this.markerList.splice(index, 1);
    }
  }

  build() {
    // 地图组件构建代码...
  }
}

关键要点:

1. 使用 addMarkers() 批量添加 - 避免标记逐个跳出
2. 保存 marker 引用 - 方便后续删除操作
3. 复用 BitmapDescriptor - 节省内存
4. 使用 removeOverlay(marker.getId()) 删除 - 精确控制