Google Map看起来很弹性

Question

您好，我正在将此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>

Answer 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地图中的所有图像，我坚信地图只是画布

Answer 2

当前地图的屏幕宽度和高度为100％。您需要将“高度”和“宽度”设置为宽度 列中的

。

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

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