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

#### 问题现象

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

#### 背景知识

*   [MapComponent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-mapcomponent)：本模块提供Map组件，通过简单的方式提供直观的地图服务。
*   [expandSafeArea](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-expand-safe-area#expandsafearea)：安全区域是指页面的显示区域，默认情况下开发者开发的界面都布局在安全区域内，不与系统设置的避让区比如状态栏、导航栏区域重叠。
*   [height](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-size#height)：设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会超出父组件的范围。
*   [getDefaultDisplaySync](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-display#displaygetdefaultdisplaysync9)：获取当前默认的display对象，然后获取屏幕高度。
*   [px2vp](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-uicontext#px2vp12)：将px单位的数值转换为以vp为单位的数值。

#### 解决方案

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/41/v3/LmszgqpMR7uCKz7XVjv-Cg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T134307Z&HW-CC-Expire=86400&HW-CC-Sign=E0088B10E97702CC86E5FA53AAF4F6669D91B8060907D6B93EBDEF3A67624C90)

地图组件在[开通地图服务](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-config-agc#section16133115441516)后才可以正常加载地图信息。

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：地图组件在[开通地图服务](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-config-agc#section16133115441516)后才可以正常加载地图信息。