谷歌地图看起来有弹性

Posted 2023-03-28

【中文标题】谷歌地图看起来有弹性

【英文标题】：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 的其余部分，很难说出问题

【参考方案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 imgmin-width: 740px，所以这也会影响 iframe 地图中的所有图像，我认为地图只是一个画布

【参考方案2】：

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

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

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

【讨论】：

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