Ionic 3 谷歌地图高度与屏幕尺寸成正比

Question

我正在尝试让更高的谷歌地图填满屏幕的整个高度（无论手机的大小）加上最底部的固定高度按钮。我正在使用Ionic 3。

现在在iPhone 5 上看起来很完美，而在iPhone X（更大的屏幕）上，地图太大了。 iPhone 6 就在中间（不好）。

<ion-content no-bounce>
  <div class="container">
    <ion-list class="autocomplete-list">
      <ion-item class="autocomplete-class" type="text" placeholder="Pick an address">{{this.geocoding.locationObject}}</ion-item>
    </ion-list>
    <div #map id="map"></div>
  </div>
  <div class="buttonContainerSafeArea">
    <button (click)="next()" class="addLocationButton">Next</button>
  </div>
</ion-content>

我的 CSS 是：

.container {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    background-color: black;
    display: block;
    widows: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  #map {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    position: fixed;
    top: 11%;
    width: 100%;
    height: 74.9%;
    z-index: 99;
    padding: 0;
    margin: 0;
  }
  .addLocationButton {
    position: absolute;
    bottom: 0;
    z-index : 999;
    width: 100%;
    height: 45px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    font-family: $font-family-buttons;
    font-weight: 500;
    color: #ffffff;
    background-color: $red-color;
    opacity: 0.9;
  }
  .buttonContainerSafeArea {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }

Answer 1

您可以尝试使用此代码获取全高谷歌地图。

ts

height : string;
constructor(public navCtrl: NavController,public alertCtrl:AlertController) 
{
    this.height = (document.documentElement.clientHeight-15)+"px";
}

html

<ion-content>
    <div #map id="map" [style.width]="'100%'" [style.height]="height"></div>
    <div class="buttonContainerSafeArea">
        <button (click)="next()" class="addLocationButton">Next</button>
    </div>
</ion-content>

从document.documentElement.clientHeight 你必须减去按钮高度。如果您在顶部添加更多元素，则还必须减去这些元素的高度。