如何使用地图组件MapComponent和MapComponentController呈现地图，效果如下图所示。

 

• MapComponent是地图组件，用于在您的页面中放置地图。
• MapComponentController是地图组件的主要功能入口类，用来操作地图，与地图有关的所有方法从此处接入。它所承载的工作包括：地图类型切换（如标准地图、空地图）、改变地图状态（中心点坐标和缩放级别）、添加点标记（Marker）、绘制几何图形(MapPolyline、MapPolygon、MapCircle)、监听各类事件等。

开发步骤

地图显示

    1. 导入Map Kit相关模块。

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

    2. 建地图初始化参数mapOption，设置地图中心点坐标及层级。

       通过callback回调的方式获取MapComponentController对象，用来操作地图。

       调用MapComponent组件，传入mapOption和callback参数，初始化地图。

@Entry@Componentstruct HuaweiMapDemo {private TAG = "HuaweiMapDemo";private mapOption?: mapCommon.MapOptions;private callback?: AsyncCallback<map.MapComponentController>;private mapController?: map.MapComponentController;aboutToAppear(): void {// 地图初始化参数，设置地图中心点坐标及层级this.mapOption = {position: {target: {latitude: 39.9,longitude: 116.4},zoom: 10}};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类，用来操作地图this.mapController = mapController;this.mapController.on("mapLoad", () => {console.info(this.TAG, `on-mapLoad`);});}};}// 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效onPageShow(): void {// 绘制地图页面的生命周期onPageShow，将地图切换到前台if (this.mapController !== undefined) {this.mapController.show();}}// 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效。onPageHide(): void {// 绘制地图页面的生命周期onPageHide，将地图切换到后台if (this.mapController !== undefined) {this.mapController.hide();}}build() {Stack() {// 调用MapComponent组件初始化地图MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback                     }).width('100%').height('100%');}.height('100%')}}

 

    3. 运行您刚完成的工程就可以在您的APP中看到地图了，运行后的效果如下图所示。

       如果没有成功加载地图，请参见无法加载地图。