为什么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;
}