Question

我在角度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％”那样可靠地工作，因为页面的高度可以无限高，但只有很宽。除非地图中的内容不是地图，否则地图的父级或父级的父级等最终需要具有指定的高度。如果有其他内容如文字，那么高度：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%;
}

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

4 个答案: