鸿蒙Next高德地图如何实现全屏显示

在鸿蒙Next系统上使用高德地图时，如何设置才能让地图全屏显示？目前打开地图后顶部有状态栏遮挡，想实现类似沉浸式的全屏效果，但找不到相关选项。请问是否需要通过代码调整布局参数，还是系统本身有隐藏的配置方法？求具体操作步骤或示例代码。

2 回复

鸿蒙Next上让高德地图全屏？简单！调用setSystemUiVisibility()藏起状态栏和导航栏就行。记得加个手势监听，不然用户可能回不来——别让产品经理背锅啊！

更多关于鸿蒙Next高德地图如何实现全屏显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中使用高德地图实现全屏显示，可以通过以下步骤实现：

1. 配置权限

在module.json5文件中添加网络和位置权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.LOCATION"
      }
    ]
  }
}

2. 布局文件设置全屏

在布局文件中，将MapView的宽高设置为全屏：

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent">

    <com.amap.api.maps2d.MapView
        ohos:id="$+id:map_view"
        ohos:width="match_parent"
        ohos:height="match_parent"/>
</DirectionalLayout>

3. 代码中初始化地图

在Ability中初始化地图并设置全屏属性：

import { MapView, AMap, LocationSource } from '@ohos/amap';

export default class MainAbility extends Ability {
  private mapView: MapView | null = null;

  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/index', (err, data) => {
      if (err) {
        console.error('Failed to load content.');
        return;
      }
      
      // 获取MapView实例
      this.mapView = findComponentById<MapView>(windowStage, $r('app.id.map_view'));
      
      // 初始化地图
      this.mapView.onCreate(null);
      const aMap: AMap = this.mapView.getMap();
      
      // 设置全屏显示（默认已通过布局实现）
      // 可选：隐藏UI控件
      aMap.getUiSettings().setZoomControlsEnabled(false); // 隐藏缩放按钮
      aMap.getUiSettings().setCompassEnabled(false); // 隐藏指南针
    });
  }

  // 生命周期管理
  onDestroy(): void {
    if (this.mapView) {
      this.mapView.onDestroy();
    }
  }
}

4. 隐藏系统状态栏（可选）

若需隐藏状态栏实现沉浸式全屏：

import window from '@ohos.window';

// 在Ability中获取窗口并设置全屏
const windowClass = await window.getLastWindow(this.context);
windowClass.setFullScreen(true);

注意事项：

  1. SDK引入：确保已正确集成高德地图SDK。
  2. API密钥：需在高德开发者平台申请并配置正确的API Key。
  3. 生命周期：务必在Ability生命周期中同步管理MapView的生命周期。
  4. 权限申请：在应用启动时动态申请位置权限。

通过以上步骤，即可实现鸿蒙Next中高德地图的全屏显示。

回到顶部