如何在离子2中为谷歌地图制作响应式画布

Question

在此代码中，我尝试将地图画布调整到框的下方，但auto似乎无法接受map element值。

map.ts

initializeMap() {
    let minZoomLevel = 16;
    Geolocation.getCurrentPosition().then((position) => {
        this.map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: minZoomLevel,
        center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        mapTypeControl: false,
        streetViewControl: false,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
    });
}

Html在导航栏下有一个框来定义交付服务的来源和目标：

map.html

<ion-content>
  <ion-row>
    <ion-col width-80>
       <ion-item> <ion-label >Origin:</ion-label> <ion-input  [value]="Origin" ></ion-input> </ion-item>
    </ion-col>
    <ion-col> 

  <button ion-button icon-only icon-left (click)="OriginMarker()"  color="light"><ion-icon name="locate" ></ion-icon> </button>    
 </ion-col>  
</ion-row>
  <ion-row>
    <ion-col width-80>
       <ion-item> <ion-label >Target: </ion-label> <ion-input  [value]="Target"></ion-input> </ion-item>
    </ion-col>
    <ion-col> 
    <button ion-button icon-only icon-left (click)="TargetMarker()" color="secondary"><ion-icon name="locate" ></ion-icon> </button>
 </ion-col>  
</ion-row>
<ion-row>
    <ion-col width-75>
<button ion-button block outline color="secondary" large >Start Delivery </button>
  </ion-col>
  <ion-col>
 <ion-label>cost: <br>{{price}} </ion-label>
  </ion-col>
</ion-row>
<div id="map_canvas"></div>
</ion-content>

map.scss

page-map {
    #map_canvas {
      width: 100%;
      height: auto;
    }
}

任何宽度和高度属性都不接受auto值。

更新：第一个屏幕截图显示height :auto;：

更新：使用height :100%;时的第二个屏幕截图：

正如您在使用100%时所看到的那样，它会创建一个超出屏幕的附加页面，然后需要进行扫描