Map Kit支持显示地图、在地图上绘制各类覆盖物（标记、折线、弧线、多边形、圆形等）、添加动画效果、处理地图交互事件、更新地图状态等。
典型使用场景：
- 在应用界面中嵌入互动式地图
- 展示地理位置标记和路线信息
- 实现基于位置的服务（LBS）功能
- 创建室内地图导航体验
[h2]地图初始化与显示
使用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
}) [h2]添加覆盖物流程
// 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(); [h2]地图动画与交互
// 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); [h2]动画使用
// 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);