html - 为什么 CSS 样式会扭曲我的 Google 地图缩放？

Question

这是一个工作版本

http://jsfiddle.net/tH78C/

这是带有 Bootstrap 样式的损坏版本（缩放小部件不再正确显示）

http://jsfiddle.net/3sjAU/

为什么会断？

Answer 1

您还可以为单个地图修复此问题，例如：

.googleMapContainer img {
    max-width: none !important;
}

Answer 2

在 Bootstrap.css第 69 行 max-width: 100%;导致了这个问题。

img {
max-width: 100%; <--
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

您可以删除它，如果需要再次指定一个新类.newclass {max-width:100%}并将其添加到图像中。

Answer 3

我修复了这里列出的内容略有不同。

.gm-style img {
    max-width: none;
}

Answer 4

无需指定新类只需复制此代码

.angular-google-map img {
    max-width: none !important;
}