# 模块描述

Map Kit支持显示地图、在地图上绘制各类覆盖物（标记、折线、弧线、多边形、圆形等）、添加动画效果、处理地图交互事件、更新地图状态等。

**典型使用场景：**

*   在应用界面中嵌入互动式地图
*   展示地理位置标记和路线信息
*   实现基于位置的服务（LBS）功能
*   创建室内地图导航体验

#### 关键Class/Interface介绍

#### 核心组件

| 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);
```