Google Maps api v3 工具：视觉扭曲？
Posted
技术标签:
【中文标题】Google Maps api v3 工具：视觉扭曲？【英文标题】：Google Maps api v3 tools: visual distortions? 【发布时间】：2012-12-07 09:30:38 【问题描述】：我刚刚注意到 gMap 视图工具正在显示……相当不寻常。他们的区域似乎仍然被正确定义——我可以和他们互动，只是他们的外表看起来很乱。
我没有对任何地图片段应用任何 CSS，我对地图容器应用的唯一 css 是 width:100%; height:100%; z-index:0;（我通常这样做）。
我在页面上确实有其他元素，它们有 position:absolute; 和 position:fixed; 以及一些高 z-indexs（500 和 1000）。它们是否可能导致地图工具的视觉失真？
我在最新版本的 Chrome、Chrome Canary、Ffx、Safari 和 Opera（在 Mac OSX 上）中看到了同样奇怪的视觉失真。
我检查了开发工具/萤火虫，没有意外的 CSS 被应用到地图的容器或直接应用到它的工具。
这是准确的 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 的组合：删除任何一个都可以解决问题。此外，页面上没有任何元素引用库中的类也没关系，它会导致失真。
我试图把它放在一个小提琴中，但我无法加载 jsfiddle.net。
【问题讨论】：
只是这个新项目？所有项目？在一台电脑上？所有电脑？我们可以看演示吗？否则在这里没什么可做的。 我目前只在做一个项目。我已经在 2 台计算机上对其进行了测试：OSX 10.6 和 10.8。我正在研究一个愚蠢的小提琴（有很多框架的东西我必须去掉），但是我在访问 jsfiddle.net 时遇到了问题。 是的，出于某种原因，jsFiddle 现在非常慢。你做一个演示是对的，但这正是为什么问题不应该完全依赖于 jsFiddle 来展示他们的代码。 哦，我的问题中肯定有太多代码要发布；） 你应该post a concise question containing the bare minimum code required to reproduce the problem...这是这些问题在未来对其他人有用的唯一方法。如果要发布的代码太多，那么这种问题可能不属于这里。即-“发现我的问题埋在这个网站的某个地方”，等等。 【参考方案1】：Bootstrap 和 Foundation 集 img max-width:100% 用于 Google 地图画布。这会导致地图控件出现失真。将 css 更改为 max-width:none;。 [source]
警告：显然img max-width: 100% … 对于响应式布局的图像自动调整大小是不可或缺的，因此请谨慎使用。 [source]
【讨论】：
是的，#map-canvas img max-width:none; 为我解决了这个问题。【参考方案2】：对于未来面临同样问题的用户，这里是修复。
#map imgmax-width: inherit;
就像其他答案所说，这是最大宽度的问题。
【讨论】：
#map img max-width: inherit !important; max-height: inherit !important【参考方案3】：
Foundation 5 不仅破坏了 gmap，还破坏了 MapQuest。幸运的是 Goomap 和 Quest 都有类允许我们重载 F5 行为，仅用于地图显示。
.google-map
height: 400px; // no default height
color: #191970; // default color for both text and background is white !!!
.quest-map
height:400px;
color: #191970;
// Fix Foundation bug with MapQuest
.mqa-display
img max-width: none;
label width: auto; display: inline;
// Fix Foundation bug with GoogleMap
.gm-style
img max-width: none;
label width: auto; display: inline;
【讨论】：
以上是关于Google Maps api v3 工具：视觉扭曲？的主要内容，如果未能解决你的问题，请参考以下文章
在 Google Maps V3 API 标记鼠标悬停时获取鼠标光标的位置
Google Maps API V3 中的 API 密钥是啥？
google maps js v3 api教程 -- 在地图上添加标记
Google Maps v3 - 防止 API 加载 Roboto 字体