如何在 Angular 4 中将 Map 的高度固定到屏幕尺寸

Question

我正在使用 Angular 谷歌地图组件创建谷歌地图。我想要谷歌地图到我的屏幕尺寸。我试过了height:100%。但它不起作用。谁能告诉我怎么做？

我跟着这个教程：https : //angular-maps.com/guides/getting-started/

地图：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: '<agm-map  [latitude]="lat" [longitude]="lng">
    <agm-marker 
        *ngFor="let m of markers;"
        [latitude]="m.lat"
        [longitude]="m.lng"
        [label]="m.label"
        [markerDraggable]="m.draggable">
        <agm-info-window>{{m.tsunami}}</agm-info-window>
    </agm-marker>
    <agm-circle *ngFor="let m of markers;"
        [latitude]="m.lat" [longitude]="m.lng" 
        [radius]="5000"
        [fillColor]="'red'"
        [circleDraggable]="false"
        [editable]="false">
    </agm-circle>
</agm-map>',
  styleUrls: ['agm-map {
  height: 100%;
}']
})
export class MapComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我会将此选择器名称用于另一个 html

<div style="style:300px;"> 
<app-map></app-map> 
</div>

`像这样。

Answer 1

您可以使用 100vh 而不是 100%

  agm-map {
      height: 100vh;
    }

如果您的 css 文件中<div id="map"></div>包含父 div，则可以使用高度 100%agm-map

#map {
  height: 100vh;
}
agm-map {
  height: 100%;
}

https://stackblitz.com/edit/angular-google-maps-demo-dzi5kg?file=app%2Fapp.component.css