Class/Interface	说明
MapComponent	地图UI组件，通过回调返回MapComponentController
MapComponentController	地图主控制器，所有地图操作的主入口
MapEventManager	地图事件监听管理器
BaseOverlay	覆盖物基础类，所有覆盖物继承自此类

覆盖物体系

展开

Class/Interface	说明
Marker	标记
MapPolyline	折线
MapArc	弧线
MapPolygon	多边形
MapCircle	圆形
PointAnnotation	点注释
Bubble	气泡
ClusterOverlay	点聚合
ImageOverlay	图片覆盖物
BuildingOverlay	3D建筑
TraceOverlay	动态轨迹
TileOverlay	瓦片图层
Heatmap	热力图
MvtOverlay	矢量图层
FlowFieldOverlay	流场图层
MassPointOverlay	海量点图层

动画体系

展开

Class/Interface	说明
Animation	动画抽象基类
AlphaAnimation	透明度动画
RotateAnimation	旋转动画
ScaleAnimation	缩放动画
TranslateAnimation	位移动画
FontSizeAnimation	字体大小动画
PlayImageAnimation	帧动画
AnimationSet	动画集合

数据模型

展开

Class/Interface	说明
MapOptions	地图初始化参数
LatLng	经纬度坐标
CameraPosition	相机位置状态
LatLngBounds	经纬度边界矩形

API组合使用关系说明

地图初始化与显示

使用MapComponent显示地图需要完成以下步骤：

收起
自动换行
深色代码主题
复制
// 1. 导入模块
import { map, mapCommon, MapComponent } from '@kit.MapKit';

// 2. 创建地图初始化参数
let mapOptions: mapCommon.MapOptions = {
  position: {
    target: { latitude: 39.9, longitude: 116.4 },
    zoom: 10
  }
};

// 3. 定义回调函数获取MapComponentController
let mapCallback = async (err, mapController) => {
  if (!err) {
    // 获取控制器成功后，可进行后续操作
    let mapController = mapController;
    let mapEventManager = mapController.getEventManager();
  }
};

// 4. 在UI中使用MapComponent
MapComponent({
  mapOptions: mapOptions,
  mapCallback: mapCallback
})

添加覆盖物流程

收起
自动换行
深色代码主题
复制
// 1. 创建覆盖物配置参数
let markerOptions: mapCommon.MarkerOptions = {
  position: { latitude: 39.9, longitude: 116.4 },
  clickable: true,
  title: "标记标题"
};

// 2. 通过MapComponentController添加覆盖物
let marker = await mapController.addMarker(markerOptions);

// 3. 可对覆盖物进行进一步操作
marker.setTitle("新标题");
marker.showInfoWindow();

地图动画与交互

收起
自动换行
深色代码主题
复制
// 1. 获取MapEventManager
let mapEventManager = mapController.getEventManager();

// 2. 订阅地图事件
mapEventManager.on("mapLoad", () => {
  console.info("地图加载完成");
});

// 3. 创建CameraUpdate并执行动画
let cameraUpdate = map.newCameraPosition({
  target: { latitude: 40.0, longitude: 117.0 },
  zoom: 12
});
mapController.animateCamera(cameraUpdate, 1000);

动画使用

收起
自动换行
深色代码主题
复制
// 1. 创建动画实例
let animation = new map.RotateAnimation(0, 270);

// 2. 配置动画参数
animation.setDuration(2000);
animation.setRepeatCount(map.AnimationRepeatMode.RESTART);

// 3. 订阅动画事件
animation.on("animationStart", () => {});
animation.on("animationEnd", () => {});

// 4. 对覆盖物应用动画
marker.startAnimation(animation);

map（地图显示功能）

Class (MapComponentController)

意见反馈

以上内容对您是否有帮助？

意见反馈

如果您有其他疑问，您也可以通过开发者社区问答频道来和我们联系探讨。

社区提问智能客服提问