我刚刚注意到 gMap View 工具正在显示……相当不寻常。他们的区域似乎仍然被正确定义——我可以很好地与他们互动，只是他们的外表看起来很乱。
我没有将任何 CSS 应用到任何 map 片段，我应用到 map 容器的唯一 CSS 是 width:100%;高度:100%； z-index:0;(我通常这样做)。
页面上确实有其他元素具有 position:absolute; 和 position:fixed; 以及一些高 z-index (500 和 1000)。它们是否可能导致 map 工具的视觉失真？
我在最新版本的 Chrome、Chrome Canary、Ffx、Safari 和 Opera(在 Mac OSX 上)中看到了同样奇怪的视觉失真。
我检查了开发工具/ Firebug ，没有意外的 CSS 被应用到 map 的容器或直接应用到它的工具。
这是准确的 HTML(我去掉了其他元素和 css，奇怪的事情仍然发生):
<html style="width:100%;height:100%;">
<head>
<link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
<link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
<script
type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=...">
</script>
<script type="text/javascript">
function ginit() {
var vancouver = new google.maps.LatLng(49.285415,-123.114982);
var mapOptions = {
center: vancouver,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
var infowindow = new google.maps.InfoWindow(),
marker;
}//ginit()
</script>
</head>
<body onload="ginit();" style="width:100%;height:100%;">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
编辑:看来问题出在 Foundation 和 Bootstrap 的组合上:删除其中任何一个都可以解决问题。同样，页面上没有元素引用库中的类也没关系，它仍然会导致失真。
我试着把它放在 fiddle 里，但我无法加载 jsfiddle.net。
最佳答案
对于 future 遇到同样问题的用户，这里是修复。
#map img{max-width: inherit;}
像其他答案一样，这是最大宽度的问题。
关于css - 谷歌地图 api v3 工具 : visual distortions?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13962398/