目录

如何实现MapComponent地图占满屏幕

问题现象

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

背景知识

解决方案

使用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：地图组件在开通地图服务后才可以正常加载地图信息。