22

我刚刚注意到 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 被应用到地图的容器或直接应用到它的工具。

Google Maps Api v3：地图界面工具

这是确切的 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。

4

3 回答 3

58

对于面临同样问题的未来用户，这里是修复。

#map img{max-width: inherit;}

像其他答案一样，这是最大宽度的问题。

于 2013-01-13T18:50:03.630 回答
20

{ img max-width:100% }用于 Google 地图画布的Bootstrap 和 Foundation 集。这会导致地图控件出现失真。将 css 更改为max-width:none;. [来源]

警告：显然img { max-width: 100% … }对于响应式布局的图像自动调整大小是不可或缺的，因此请谨慎使用。[来源]

于 2012-12-20T00:48:35.233 回答
0

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; }
}
于 2015-02-18T14:36:44.347 回答