Angular 4 - Google地图高度填充剩余空间

Question

我在angular 4应用程序中使用https://github.com/SebastianM/angular-google-maps.

我必须在CSS中指定地图高度,否则,地图将不会显示:

agm-map {
  height: 300px;
}

是否可以<agm-map>填充父容器中的剩余空间？

PS:我更喜欢使用https://github.com/angular/flex-layout的解决方案

Answer 1

您可以使用模板引用来获取地图父元素的高度,并以此方式设置地图的高度.

    <div class="container" fxLayout="column">
      <div class="map" fxFlex="1 1 100%" #map>
        <agm-map [style.height.px]="map.offsetHeight" [latitude]="lat" [longitude]="lng"></agm-map>
      </div>
    </div>

Answer 2

高度 100% 将不起作用，除非其父元素具有可以使用百分比进行比较的高度（或者如果您使用固定或绝对定位）。高度 100% 不像“宽度 100%”那样可靠，因为页面的高度可以无限高，但只能如此宽。地图的父级，或父级的父级等最终需要具有指定的高度，除非框内有地图以外的内容。如果还有其他内容，如文本，则 height:100% 将填充其他内容占据的相同高度。如果没有，您可以尝试使用 vh 单位指定屏幕高度的绝对百分比

height : 100vh

这将使其占据全屏高度，但如果您将其包装在另一个想要灵活使用的元素中，这通常并不理想。您也可以尝试设置最小高度。