# 如何实现MapComponent地图占满屏幕

#### 问题现象

使用expandSafeArea拓展地图容器的可布局区域，地图未沉浸式占满屏幕，如何实现地图沉浸式占满屏幕？

#### 背景知识

*   MapComponent：本模块提供Map组件，通过简单的方式提供直观的地图服务。
*   expandSafeArea：安全区域是指页面的显示区域，默认情况下开发者开发的界面都布局在安全区域内，不与系统设置的避让区比如状态栏、导航栏区域重叠。
*   height：设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会超出父组件的范围。
*   getDefaultDisplaySync：获取当前默认的display对象，然后获取屏幕高度。
*   px2vp：将px单位的数值转换为以vp为单位的数值。

#### 解决方案

使用expandSafeArea拓展地图容器的可布局区域，通过getDefaultDisplaySync获取屏幕高度，然后配置到height，调节容器高度。

地图组件在开通地图服务后才可以正常加载地图信息。

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

@Entry
@Component
struct HuaweiMapDemo {
  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  private mapEventManager?: map.MapEventManager;
  @State mapHeight: number = 0;

  aboutToAppear(): void {
    let displayClass = display.getDefaultDisplaySync();
    this.mapHeight = this.getUIContext().px2vp(displayClass.height);
    // 地图初始化参数，设置地图中心点坐标及层级
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10
      }
    };

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;
        this.mapEventManager = this.mapController.getEventManager();
        this.mapEventManager.on("mapLoad", () => {
        });
      }
    };
  }

  build() {
    Stack() {
      // 调用MapComponent组件初始化地图
      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
        .width('100%')
        .height(this.mapHeight)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
    .height('100%')
  }
}
```

#### 常见FAQ

Q：为什么只使用expandSafeArea不能直接将地图布满屏幕？

A：MapComponent是地图和容器的组合，目前expandSafeArea只能扩展容器，不能直接扩展地图。

Q：为什么不只使用height属性将地图布满屏幕？

A：若父组件是Stack，子组件从中间布局延伸，则可以满足。其他子组件布局从顶部延伸的容器，如Column，会导致顶部无法布满。

Q：没有地图具体信息如何解决？

A：地图组件在开通地图服务后才可以正常加载地图信息。