OpenHarmony地图如何自定义标记

在 OpenHarmony 中，如果你使用的是 地图能力（如 @ohos.map / 第三方地图 SDK / ArkUI 地图组件），自定义标记（Marker / Pin）通常可以通过 添加自定义图标、视图或覆盖物 来实现。下面以 OpenHarmony 官方地图能力（Map Kit / ArkUI Map） 和 常见自定义方式 为例说明。

一、使用系统地图 Marker 自定义图标（最常用）

1️⃣ 添加基础 Marker

import map from '@ohos.map';

let markerOptions: map.MarkerOptions = {
  position: {
    latitude: 39.9,
    longitude: 116.4
  },
  title: "自定义标记",
  snippet: "这是描述"
};

mapController.addMarker(markerOptions);

2️⃣ 使用自定义图片作为标记

let markerOptions: map.MarkerOptions = {
  position: {
    latitude: 39.9,
    longitude: 116.4
  },
  icon: $r('app.media.custom_marker'), // resources/base/media
  anchorX: 0.5,
  anchorY: 1.0
};

✅ 支持：

• PNG / SVG
• 本地资源 $r('app.media.xxx')
• 调整锚点（底部居中）

二、使用自定义 View 作为标记（高级）

如果系统 Marker 不满足需求（如带文字、按钮、动画）：

方式：Overlay + CustomDialog / Canvas

// 在地图上层叠加 ArkUI 组件
Stack() {
  MapComponent()
  CustomMarker({
    x: screenX,
    y: screenY
  })
}

@Component
struct CustomMarker {
  build() {
    Column() {
      Text("店铺")
        .fontSize(12)
        .backgroundColor('#FFFFFF')
        .padding(4)
      Image($r('app.media.pin'))
    }
  }
}

✅ 优点：

• 完全自定义 UI
• 支持动画、点击、状态变化

❌ 缺点：

• 需手动同步地图坐标 → 屏幕坐标

三、动态更新标记

marker.setTitle("新标题");
marker.setIcon($r('app.media.new_icon'));

或移除：

mapController.removeMarker(marker);

四、点击自定义标记

marker.setOnClickListener(() => {
  console.info("Marker clicked");
});

五、地图类型说明（很重要）

六、推荐实践

✅ 简单需求：

使用 Marker + icon

✅ 复杂 UI（气泡、评分、按钮）：

Overlay + ArkUI Component

✅ 高性能多标记：

使用聚合（Cluster）

如果你能告诉我：

• 使用的是 OpenHarmony 哪个地图方案
• API 版本（如 API 10 / 11）
• 是否 HarmonyOS NEXT

我可以给你 可直接运行的示例代码。