Google Maps API V3:奇怪的UI显示故障(带有屏幕截图)

任何人有任何想法是什么导致这个奇怪的小故障谷歌地图用户界面组件,真的很感谢您的来信!

在这里输入图像描述

地图是用以下方式创build的:

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); 

即使没有标记,毛刺也是一样的。

我们遇到了同样的问题。 CSSdevise师正在使用这种风格:

style.css文件

 img {max-width: 100%; } 

我们没有禁用缩放控制,而是通过覆盖map_canvas元素的img样式来解决问题,如下所示:

style.css中:

 #map_canvas img { max-width: none; } 

现在变焦控制正确显示。

设置“img max-width:100%”是一种在响应/stream畅网站devise中采用的技术,以便在浏览器重新resize时,图像按比例重新resize。 显然,一些CSS网格系统默认开始设置这种风格。 有关stream体图像的更多信息在这里: http : //www.alistapart.com/articles/fluid-images/不知道为什么这与谷歌地图冲突…

与最新版本的谷歌地图API你需要这个:

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

看起来像是一个缩放控制的问题。 尝试添加zoomControl:false到您的选项。

事实上,正常的缩放滑块似乎位于页面左侧(使用Firebug> Inspect Element)。 可能是CSS冲突?

那么我得到了解决这个问题:

在你的CSS上添加了如下内容:

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

尽量不要让它成为全球性的,它应该解决你:)

这对我工作:

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

属性“!important”确保覆盖任何其他样式,#map是声明新对象时分配的ID Gmaps:

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

如果您正在使用Dreamweaverstream体网格function,则默认设置应如下所示:

 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%; } 

只需要将代码replace即可。

Bootstrap(从版本2.3.2开始)以与接受的答案相同的方式混淆图像。

事实上,我怀疑在Haroldo的网站中使用的devise使用Bootstrap。

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

我在Square Space网站上遇到了这个问题。 我没有访问CSS样式表。 由于您正在embedded一个html文档,您可以使用内联CSS来解决问题。 我修改了容器的风格,而不是做一个网站的广泛的变化(我不能这样做)。 这是我做的:

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