Question

我刚刚注意到gMap视图工具正在显示...而且异常。他们的地区似乎仍然得到了恰当的定义 - 我可以很好地与他们互动，只是他们的外表看起来很混乱。

我没有将任何CSS应用于任何地图片段，我应用于地图容器的唯一CSS是width:100%; height:100%; z-index:0;（我通常这样做）。

我的页面上还有其他元素，其中包含position:absolute;和position:fixed;以及一些高z-index s（500＆amp; 1000）。它们是否可能导致Map工具的视觉扭曲？

我在Chrome，Chrome Canary，Ffx，Safari和Opera（在Mac OSX上）的最新版本中看到了同样奇怪的视觉失真。

我检查了dev工具/ firebug，并没有将意外的CSS应用于地图的容器或直接应用于其工具。

Google Maps Api v3: Map interface tools

这是确切的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的组合：删除任何一个都可以解决问题。此外，页面上没有任何元素引用来自libs的类并不重要，它会导致失真完全相同。

我试图把它放在一个小提琴里，但是我无法加载jsfiddle.net。

Answer 1

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

#map img{max-width: inherit;}

像其他答案一样说这是max-width的问题。

Answer 2

Google地图画布的Bootstrap和Foundation集{ img max-width:100% }。这会导致地图控件显得过失。将css改为max-width:none;。 [source]

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

Answer 3

基金会5不仅打破了gmap，还打破了MapQuest。幸运的是Goomap＆amp; 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工具：视觉扭曲？

3 个答案: