angular - Angular 4 - 谷歌地图高度填充剩余空间

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

您可以使用模板 ref 来获取地图父元素的高度并以这种方式设置地图的高度。

    <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

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

Answer 3

将此添加到角度/离子项目 global.scss

.agm-map {
height: 90%;
//To add styling to container :)
.agm-map-container-inner .sebm-google-map-container-inner{
border: 2px solid red;
border-radius: 15px;
}

我希望它可以帮助某人。

Answer 4

这对我有用：

agm-map {
  height: 100%;
}