网站搜索

html - AGM 地图填充容器


我正在使用 Angular2 和 Google 地图组件 https://angular-maps.com/。我正在尝试解决的问题是,我需要地图填充我的容器 div,例如:

<div id="container" style="height:100%; width: 100%">
<agm-map></agm-map>
<div>

(当然我不是用 style 而是用 css,那只是一个例子)

我希望那个 agm-map 无论其高度或宽度如何,都能填满容器 div,总是填满它。当 agm map 只接受以 px 和 vh 为单位的高度时,我无法解决这个问题。

调整大小和责任也会很棒。

答案#1

我不能详细说明,但我的公司有这样的 HTML

<div fxFlex="100" class="map-full-card-content">
  <agm-map [fitBounds]="latlngBounds"></agm-map>
</div>

使用一个 .scss 文件的

.map-full-card-content {
  height: 100% !important;
  width: 100%;
  margin: 0;

  agm-map {
    height: calc(100% - 12px) !important;
    width: 100%;
  }
}

看起来在填充容器和调整大小方面运行良好。