如何在Ionic 3、Cordova中让Google Maps仅占容器div 50%高度？

我之前也遇到过类似的坑——直接给地图设50%高度不生效，核心原因是Google Maps渲染依赖容器有明确的尺寸，而Ionic的ion-content默认是flex布局，直接用百分比高度时父元素的高度传递可能出问题。下面给你几个实测有效的解决方案：

方案一：用Flex布局拆分ion-content #

这是最贴合Ionic布局逻辑的方式，把ion-content分成上下两个区域，地图占一半高度：

1. HTML结构 #

<ion-content class="split-content">
  <!-- 地图容器 -->
  <div class="map-wrapper">
    <div #map id="map"></div>
  </div>
  <!-- 下半部分内容区 -->
  <div class="bottom-content">
    <!-- 这里放你的其他页面内容 -->
  </div>
</ion-content>

2. CSS样式 #

.split-content {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保ion-content占满可用高度 */
}

.map-wrapper {
  flex: 1; /* 自动分配ion-content的50%高度（和bottom-content各占一半） */
}

#map {
  width: 100%;
  height: 100%; /* 地图占满容器 */
}

.bottom-content {
  flex: 1;
  padding: 16px; /* 可选：给内容加内边距 */
}

3. 地图初始化时机 #

一定要在Ionic的ionViewDidEnter钩子中初始化地图，而不是ngOnInit——此时DOM已经完全渲染，容器高度已经生效：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { GoogleMap, GoogleMapsEvent } from '@ionic-native/google-maps/ngx';

@Component({
  selector: 'app-map-page',
  templateUrl: './map-page.component.html',
  styleUrls: ['./map-page.component.scss'],
})
export class MapPageComponent {
  @ViewChild('map', { static: false }) mapElement: ElementRef;
  map: GoogleMap;

  ionViewDidEnter() {
    this.loadMap();
  }

  loadMap() {
    this.map = new GoogleMap(this.mapElement.nativeElement, {
      camera: {
        target: { lat: 43.0741904, lng: -89.3809802 },
        zoom: 18,
        tilt: 30
      }
    });

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('地图渲染完成');
    });
  }
}

方案二：直接用视口高度（vh）快速解决 #

如果不需要和其他内容平分高度，直接给地图容器设50vh（视口高度的50%）更简单：

CSS样式 #

.map-wrapper {
  height: 50vh;
  width: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

同样要在ionViewDidEnter中初始化地图，避免容器高度未生效导致渲染失败。

方案三：手动触发地图Resize（兜底方案） #

如果以上方法还是不生效，大概率是地图初始化时容器高度仍为0，可以在地图就绪后手动触发resize：

this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
  // 延迟100ms确保DOM更新完成
  setTimeout(() => {
    this.map.resize();
  }, 100);
});

注意事项 #

• 如果页面有固定的header/footer，记得用calc()调整高度，比如height: calc(50vh - var(--ion-header-height));
• 不要给ion-content加overflow: hidden，否则可能遮挡地图内容

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