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

Question

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

我必须在CSS中指定地图高度，像这样，否则地图不会显示：

agm-map {
  height: 300px;
}

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

PS：我更喜欢使用 https://github.com/angular/flex-layout

的解决方案

Answer 1

高度 100% 将不起作用，除非其父元素具有可用于比较百分比的高度（或者如果您使用固定或绝对定位）。高度 100% 不像 'width 100%' 那样可靠，因为页面的高度可以无限高，但只有这么宽。地图的父级，或者父级的父级等最终需要有一个指定的高度，除非盒子里有除地图以外的内容。如果有文本等其他内容，则 height:100% 将填充与其他内容相同的高度。如果没有，您可以尝试使用 vh 单位来指定屏幕高度的绝对百分比

height : 100vh

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

Answer 2

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

    <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 3

这对我有用：

agm-map {
  height: 100%;
}

Answer 4

将此添加到 angular / ionic 项目 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;
}

希望对大家有所帮助。

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

Angular 4 - Google map height fill remaining space

angular2-google-maps

angular-flex-layout

angular