css - 如何将 map 的高度固定为 Angular 4 中的屏幕尺寸

Question

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

我遵循了本教程:https://angular-maps.com/guides/getting-started/

map :

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;
    }

如果你有父 div <div id="map"></div>，你可以使用 height 100%包含 agm-map在你的 CSS 文件中

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

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