谷歌地图API V3：奇怪的UI显示故障（截图）

任何人有任何想法是什么导致这个奇怪的小故障与谷歌地图用户界面组件，真的很感谢您的来信！谷歌地图API V3：奇怪的UI显示故障（截图）

enter image description here

地图与创建：

 var options = { 
     zoom: <?php echo $this->zoom ?>, 
     center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>), 
      mapTypeControl: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP     
     }; 

     var map = new google.maps.Map(document.getElementById('map_canvas'), options);

和毛刺是一样的，即使没有标记。

来源

2011-09-19 Haroldo

如果你加入，你如何声明这个组件 – slawekwin

@slawekwin片段将是有益的 - 更新问题。 – Haroldo

183

我们遇到了同样的问题。 CSS的设计师用这种风格：

：

的style.css

img {max-width: 100%; }

而不是禁用变焦控制，我们通过重写img样式为map_canvas提供的元素，像这样固定的问题的style.css：

#map_canvas img { max-width: none; }

变焦控制现在显示正确。

设置“img max-width：100％”是一种在响应/流畅网站设计中采用的技术，以便在浏览器重新调整大小时，图像按比例重新调整大小。显然，一些CSS网格系统默认开始设置这种风格。有关流体图片更多资讯：http://www.alistapart.com/articles/fluid-images/不知道为什么这矛盾与谷歌地图...

来源

2011-10-01 22:23:17

这也影响了我。谷歌地图API v3使用一个大尺寸的透明PNG雪碧图像（'http：// maps.gstatic.com/mapfiles/iw3.png'），它放在一个父容器中，其中overflow：hidden'。因此，限制图像的宽度会导致图像被压缩。 – jwal

这是一个绊倒我。非常感谢您发布此解决方案！ –

这真的很烦人，感谢修复！ – MiniQuark

看起来像变焦控制的问题。尝试将zoomControl:false添加到您的选项。

事实上，正常的缩放滑块似乎位于页面左侧（使用Firebug> Inspect Element）。可能是CSS冲突？

来源

2011-09-19 14:58:45 duncan

+12

好的发现它。这是由我的'img {max-width：100％; }' – Haroldo

img {max-width：100％;}也是我的问题，谢谢！ – jamesbar2

我面临同样的问题，并修复后删除CSS img {最大宽度：100％;}谢谢 – nbhatti2001

嗯，我得到了这样的修复：

在你的CSS你补上一句：

img {max-width: 100%; height: auto;}

尽量不要把它全球，它应该解决您:)

来源

2013-04-16 21:14:22 Xedret

与谷歌地图API的最新版本，你需要这样的：

<style> 
    .gm-style img { max-width: none; } 
    .gm-style label { width: auto; display: inline; } 
</style>

来源

2013-10-12 22:15:30

这是接受的解决方案相同，但具有不同的选择器和额外的重置自己的标签样式。 – lmeurs

帮了很多。谢谢 –

这一个实际上帮助 – Nathanphan

如果您使用Dreamweaver的流体网格功能默认的设置应该是这样：

img, object, embed, video { 
    max-width: 100%; 
} 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
}

试试这个：

object, embed, video { 
    max-width: 100%; 
} 
#map_canvas img { max-width: none; } 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
}

只需更换代码，因为它是。

来源

2013-12-28 10:33:40 user3141435

Bootstrap（版本2.3.2）以与接受的答案相同的方式混淆图像。

事实上，我怀疑在Haroldo的网站中使用的设计使用Bootstrap。

我只是发布这个，因为没有其他人提到Bootstrap，有人可能正在寻找一个Bootstrap特定的解决方案。

来源

2014-01-04 02:22:12 Locoluis

我在Square Space网站上遇到了这个问题。我没有访问CSS样式表。由于您正在嵌入html文档，因此您可以使用内联CSS来解决问题。我修改了容器的样式，而不是进行网站范围的更改（我无法做到这一点）。下面是我做的：

<style> 
    html, body, #map-canvas { 
    height: 600px; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
    #map-canvas img {max-width: none;} 
</style>

来源

2014-03-11 13:38:25 bhaas

这为我工作：“重要的”

#map img { max-width: none !important; } (from Patrick's answer)

属性确保覆盖任何其他样式，#map是当你声明的新分配的ID的对象Gmaps：

<script> 
    map = new GMaps({ 
      div: '#map',   <- your id 
      lat: *******, 
      lng: *******, 
      scrollwheel: false, 
      panControl: true, 
      .... 
      ... 
</script>

来源

2014-09-23 13:34:48 Frank

谷歌地图API V3：奇怪的UI显示故障（截图）

回答

相关问题