输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
API参考
高级筛选
API version全部版本
设备全部
元服务API集不筛选
您当前正在浏览HarmonyOS最新文档，覆盖已发布的所有API版本，可在API参考中筛选您使用的API版本。详细的版本配套关系请参考版本说明。
API参考应用服务Map Kit（地图服务）ArkTS组件MapComponent（地图组件）

MapComponent（地图组件）

更新时间: 2026-07-28 11:23
本文导读

本模块提供Map组件，您需要提供mapOptions和回调，通过回调获取MapComponentController对象。

起始版本： 4.1.0(11)

导入模块

PhonePC/2in1TabletWearable
收起
自动换行
深色代码主题
复制
  1. import { MapComponent } from '@kit.MapKit';

MapComponent

PhonePC/2in1TabletWearable

MapComponent提供map组件，通过回调获取MapComponentController对象。

装饰器类型： @Component

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从版本4.1.0(11)开始，该接口支持在元服务中使用。

系统能力： SystemCapability.Map.Core

起始版本： 4.1.0(11)

参数：

展开
名称 类型 只读 可选 装饰器类型 说明
mapOptions mapCommon.MapOptions 否 是 NA

地图初始化参数。

说明：

若未传递该参数，则地图无法创建。
mapCallback AsyncCallback<map.MapComponentController> 否 是 NA

回调函数，当地图初始化成功，err为undefined，data为获取到的map.MapComponentController；否则为错误对象。

说明：

若未传递该参数，则地图无法创建。
customInfoWindow customInfoWindowCallback 否 是 @BuilderParam 自定义信息窗，显示一个自定义样式的信息窗，可用于展示标记相关的详细信息。

示例：

收起
自动换行
深色代码主题
复制
  1. import { map, mapCommon, MapComponent, customInfoWindowCallback } from '@kit.MapKit';
  2. import { AsyncCallback } from '@kit.BasicServicesKit';
  3. 

  4. @Entry
  5. @Component
  6. struct MarkerDemo {
  7.   private mapOptions?: mapCommon.MapOptions;
  8.   private mapController?: map.MapComponentController;
  9.   private mapCallback?: AsyncCallback<map.MapComponentController>;
  10. 

  11.   aboutToAppear(): void {
  12.     this.mapOptions = {
  13.       position: {
  14.         target: {
  15.           latitude: 32.120750,
  16.           longitude: 118.788765
  17.         },
  18.         zoom: 15
  19.       }
  20.     }
  21. 

  22.     this.mapCallback = async (err, mapController) => {
  23.       if (!err) {
  24.         this.mapController = mapController;
  25.         let markerOptions: mapCommon.MarkerOptions = {
  26.           position: {
  27.             latitude: 32.120750,
  28.             longitude: 118.788765
  29.           },
  30.           clickable: true,
  31.           // 设置信息窗标题
  32.           title: "自定义信息窗"
  33.         };
  34.         await this.mapController?.addMarker(markerOptions);
  35.       }
  36.     }
  37.   }
  38. 

  39.   build() {
  40.     Stack() {
  41.       Column() {
  42.         MapComponent({
  43.           mapOptions: this.mapOptions,
  44.           mapCallback: this.mapCallback,
  45.           // 自定义信息窗
  46.           customInfoWindow: this.customInfoWindow
  47.         })
  48.           .width('100%')
  49.           .height('100%')
  50.       }.width('100%')
  51.     }.height('100%')
  52.   }
  53. 

  54.   // 自定义信息窗BuilderParam
  55.   @BuilderParam customInfoWindow: customInfoWindowCallback = this.customInfoWindowBuilder;
  56. 

  57.   // 自定义信息窗Builder
  58.   @Builder
  59.   customInfoWindowBuilder($$: map.MarkerDelegate) {
  60.     if ($$.marker) {
  61.       Text($$.marker.getTitle())
  62.         .width("50%")
  63.         .height(50)
  64.         .backgroundColor(Color.Green)
  65.         .textAlign(TextAlign.Center)
  66.         .fontColor(Color.Black)
  67.         .font({ size: 25, weight: 10, style: FontStyle.Italic })
  68.         .border({
  69.           width: 3,
  70.           color: Color.Black,
  71.           radius: 25,
  72.           style: BorderStyle.Dashed
  73.         })
  74.     }
  75.   }
  76. }

build

PhonePC/2in1TabletWearable

build(): void

MapComponent的默认构造函数，无法直接调用此方法。

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从版本4.1.0(11)开始，该接口支持在元服务中使用。

系统能力： SystemCapability.Map.Core

起始版本： 4.1.0(11)

customInfoWindowCallback

PhonePC/2in1TabletWearable

type customInfoWindowCallback = (markerDelegate: map.MarkerDelegate) => void

自定义信息窗回调。

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从版本5.0.0(12)开始，该接口支持在元服务中使用。

系统能力： SystemCapability.Map.Core

起始版本： 5.0.0(12)

参数：

展开
参数名 类型 必填 说明
markerDelegate map.MarkerDelegate 是 用于表示代理对象的标记。
ArkTS组件
Notification Kit（用户通知服务）
相关推荐
文档Class (MapComponentController)
文档mapCommon（地图属性模型）
文档显示地图
文档Interface (MapEventManager)
文档Interface (MapCircle)
文档Interface (MapArc)
文档functionalInputComponentManager(场景化融合Input组件管理)
文档Interface (IndoorMapInfo)
文档Interface (Marker)
文档Interface (BaseOverlay)
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词