Ionic Capacitor Google Maps在iOS上覆盖WebView致头部不可见

在iOS上，@capacitor/google-maps 使用原生视图（MKMapView）渲染，其层级高于WebView，导致Web端的Ionic Toolbar被地图覆盖。以下是具体解决方案：

步骤1：调整布局结构 #

将Toolbar移至ion-header中，而非ion-content内部，Ionic会自动处理安全区域适配：

<ion-header>
  <ion-toolbar class="tool">
    <ion-icon
      class="back"
      name="arrow-back-circle"
      (click)="handleDismissMap()"
    ></ion-icon>
    <ion-button
      slot="end"
      shape="round"
      class="action-button"
      (click)="handleSaveLocation()"
    >
      <ion-icon slot="start" name="location-outline"></ion-icon>
      Save Location
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <capacitor-google-maps id="map" #map></capacitor-google-maps>
  </div>
</ion-content>

步骤2：修改CSS，调整地图容器高度 #

计算并减去Header的高度，确保地图不会覆盖Header区域：

ion-content {
  --background: none;
}

body {
  background: none;
}

#container {
  width: 100%;
  /* 替换为实际Header高度，示例为88px */
  height: calc(100% - 88px);
}

capacitor-google-maps {
  width: 100%;
  height: 100%;
  display: inline-block;
}

ion-toolbar.tool {
  padding: 1rem;
  --background: transparent;

  ion-icon.back {
    color: #fff;
    font-size: 40px;
    margin: 0.4rem 1rem 0 0;
  }

  ion-button.action-button {
    color: #1d4370 !important;
    --color: #1d4370 !important;
    --background: #fff !important;
    font-family: "Gothom Medium" !important;
    ion-icon {
      color: #1d4370 !important;
    }
  }
}

步骤3：设置地图Inset，避免内容被遮挡 #

在组件初始化时，通过Capacitor Maps API设置地图的顶部内边距，确保地图控件和内容不会被Header挡住：

import { Component, ViewChild } from '@angular/core';
import { CapacitorGoogleMaps } from '@capacitor/google-maps';

@Component({
  selector: 'app-map',
  templateUrl: './map.page.html',
  styleUrls: ['./map.page.scss'],
})
export class MapPage {
  @ViewChild('map') mapRef: CapacitorGoogleMaps;
  map: any;

  async ngAfterViewInit() {
    // 初始化地图
    this.map = await this.mapRef.create({
      apiKey: '你的Google Maps API密钥',
      element: document.getElementById('map'),
      config: {
        center: { lat: 37.7749, lng: -122.4194 },
        zoom: 12,
      },
    });

    // 设置地图顶部内边距，与CSS中减去的高度一致
    await this.map.setMapInsets({
      top: 88,
      left: 0,
      right: 0,
      bottom: 0,
    });
  }

  handleDismissMap() {
    // 你的关闭逻辑
  }

  handleSaveLocation() {
    // 你的保存逻辑
  }
}

关键原因说明 #

iOS平台上，Capacitor Google Maps的原生视图层级高于WebView，Web端的DOM元素无法覆盖原生视图。通过调整容器高度预留Header空间，并设置地图inset，既能让Header正常显示，又能保证地图内容不被遮挡。

内容的提问来源于stack exchange，提问作者Ariyan Ashfaque