Ionic React中@capacitor/google-maps在Android模态框显示空白问题求助

方案1：针对模态框内的IonContent单独设置背景，同时保留模态框外层背景 #

Android端Capacitor Google Maps是原生视图，默认会渲染在WebView下方，所以需要让承载地图的ion-content背景透明，但可以给模态框本身设置背景色，避免整体透明：

1. 给模态框内的ion-content添加自定义类名：

<IonModal isOpen={isModalOpen}>
  <IonContent className="map-modal-content">
    <div style={{ height: '100%', width: '100%' }}>
      <GoogleMap
        apiKey="你的API密钥"
        onMapReady={onMapReady}
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  </IonContent>
</IonModal>

2. 在全局CSS或组件样式中添加：

/* 让承载地图的ion-content背景透明，让下方的原生地图显示出来 */
.map-modal-content {
  --background: transparent;
}

/* 给模态框外层设置背景色，保持模态框不透明 */
ion-modal {
  --background: #ffffff; /* 替换成你需要的模态框背景色 */
}

方案2：绕过IonContent，直接用普通容器承载地图 #

如果不想修改ion-content的背景，可以直接在模态框内使用普通div作为地图容器，自行设置背景和尺寸：

<IonModal isOpen={isModalOpen}>
  <div style={{ 
    height: '100vh', 
    width: '100vw', 
    backgroundColor: '#ffffff',
    overflow: 'hidden'
  }}>
    <GoogleMap
      apiKey="你的API密钥"
      onMapReady={onMapReady}
      style={{ height: '100%', width: '100%' }}
    />
  </div>
</IonModal>

这种方式避免了ion-content的默认样式干扰，同时确保模态框有自己的背景色。

方案3：调整模态框和地图容器的层级 #

通过CSS变量提升模态框和地图容器的层级，确保原生地图视图不会被WebView遮挡：

/* 提升模态框的基础层级 */
ion-modal {
  --z-index: 1000;
}

/* 让地图容器的层级高于WebView内容 */
.map-container {
  position: relative;
  z-index: 1001;
}

配合方案1或2使用，进一步确保地图显示在最上层。

内容的提问来源于stack exchange，提问作者Puya Sarmidani