谷歌地图看起来有弹性答案

【问题标题】：Google Map looks stretchy谷歌地图看起来有弹性
【发布时间】：2019-09-18 13:58:33
【问题描述】：

您好，我正在为我的网站实现这个google documentation ，但它看起来很奇怪和有弹性。如何使其正常但在其列中保持全宽和全高。有什么解决办法吗？

目前，我的地图在flexbox列中，对地图生效了吗？

#map-canvas{
    height: 100%;
}

<div class="mdl-grid p-0">
  <div class="mdl-cell mdl-cell--6-col">
    <div id="map-canvas"></div>
  </div>
  <div class="mdl-cell mdl-cell--6-col">
  ...
  </div>
</div>

【问题讨论】：

尝试将高度改为自动
height : auto 可以使地图消失 @RachelGallen - 给地图一个绝对高度而不是相对高度
#map-canvas 变为高度：0
没有所有的 CSS 和 HTML（和 javascript）很难说你做错了什么
@vanio178 如果不看 html/css 的其余部分，很难说出问题

标签： javascript html google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

最后我遇到了问题，这是我的错。但也许这对未来有用

<div id="map-wrapper"> <!-- in this wrapper i put a style for images inside it -->
  <div class="mdl-grid p-0">
    <div class="mdl-cell mdl-cell--6-col">
      <div id="map-canvas"></div>
    </div>
    <div class="mdl-cell mdl-cell--6-col">
    ...
    </div>
  </div>
</div>

我在其中设置了图像样式#map-wrapper img{min-width: 740px}，所以这也会影响 iframe 地图中的所有图像，我认为地图只是一个画布

【讨论】：

【解决方案2】：

地图当前为 100% 的屏幕宽度和高度。您需要将高度和宽度设置为宽度您的专栏。

#map-canvas{
    height: 30vh;
    width: 30vw;
}

还可以查看https://www.w3schools.com/cssref/css_units.asp 的 vh 和 vw。这有助于将宽度和高度设置为设备的宽度和高度。

【讨论】：

这个解决方案在我的情况下有效，如果你要投反对票，至少留下评论教育这个人。