javascript - 谷歌地图与 Bootstrap 3 轮播错误？

Question

我正在尝试将谷歌地图添加为 Bootstrap 轮播中的项目。 由于某种原因，当我在轮播中包含 map 时， map 的图 block 加载错误。 如果幸运的话，它会正确加载并启动几秒钟，但随后它会以不同的缩放级别以一组图 block 形式进行流式传输。

如果将相同的逻辑移到轮播之外，它会显示正常。

我尝试使用下面的 bootply 简化示例页面来演示该问题，因为我发现很难解释。 http://www.bootply.com/YcaTxtftSW

任何人都可以对我缺少的内容提出建议吗？

Answer 1

这是 CSS 强制的，.carousel img 的设置 min-height: 400px; 也会影响 map 使用的图像(尤其是图 block ，它们具有自然尺寸为 256x256)

添加此 CSS:

#map-canvas img {
  min-height: 0;
}