文章/答案/技术大牛

发布

社区首页 >问答首页 >Google v3工具:视觉扭曲？

问Google v3工具:视觉扭曲？
EN

Stack Overflow用户

提问于 2012-12-19 22:35:34

回答 3查看 7.9K关注 0票数 22

我刚刚注意到gMap视图工具正在显示…相当异乎寻常。他们的区域似乎仍然有正确的定义--我可以很好地与他们互动，只是他们的外表看起来很混乱。

我没有将任何CSS应用于任何映射块，我应用到映射容器的唯一css是width:100%; height:100%; z-index:0; (我通常这样做)。

我在页面上确实有其他元素，它们有position:absolute;和position:fixed;以及一些高z-indexs (500 & 1000)。他们是否有可能导致地图工具的视觉扭曲？

在最新版本的Chrome、Canary、Ffx、Safari和Opera ( Mac上)中，我也看到了同样奇怪的视觉扭曲。

我检查了dev tools / firebug，没有意外的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的组合:删除其中任何一个修复了问题。此外，页面引用类中没有任何元素来自库，这并不重要，它同样会导致失真。

我试着把这个放在小提琴里，但是我不能让jsfiddle.net加载。

css

google-maps-api-3

css-position

appearance

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-01-13 18:50:03

对于面临同样问题的未来用户，以下是修复方法。

#map img{max-width: inherit;}

就像其他人说的，这是最大宽度的问题。

票数 58

Stack Overflow用户

发布于 2012-12-20 00:48:35

引导和基金会设置{ img max-width:100% }谷歌地图画布。这会导致Maps控件出现不愉快的情况。将css更改为max-width:none;。[source]

警告：显然img { max-width: 100% … }是图像自动调整的组成部分，用于响应性布局，所以要谨慎使用。[source]

票数 20

Stack Overflow用户

发布于 2015-02-18 14:36:44

基金会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; }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13962398

复制

相似问题

问Google v3工具:视觉扭曲？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google v3工具:视觉扭曲？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google v3工具:视觉扭曲？
EN