我使用Google Maps API(v.3)显示带有几个标记的地图。我最近注意到用于缩放地图的控件搞砸了(它并不总是这样)。我不知道原因是什么。
此帖最初有一个指向您可以查看问题的页面的链接,但链接现在已被破坏,所以我已将其删除。
答案 0 :(得分:109)
你的CSS搞砸了。删除第814行中的max-width: 100%;
,缩放控件将再次显示正常。为避免此类错误,请在CSS中使用更具体的选择器。
答案 1 :(得分:80)
#myMap_canvas img {
max-width: none;
}
为我修复了它,但我也想通过@Ben指出对问题的评论,“如果使用is map_canvas作为map div id,则Bootstrap不会发生这个问题”。他是对的。我没有使用Bootstrap,但是在我更改div id之后问题就开始了。
将其设置回map_canvas会修复它,而不会更改最大宽度。
<div id="map_canvas"></div>
答案 2 :(得分:21)
如果您正在使用Bootstrap,请将其命名为“google-maps”类。这对我有用。
作为替代方案,您可以重置谷歌地图div的所有内容,作为一种最后的解决方案:
HTML:
<div class="mappins-map"><div>
CSS:
.mappins-map img {
max-width: none !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
答案 3 :(得分:16)
分享@ Max-Favilli回答:
使用最新版本的google maps api,您需要:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
感谢@ Max-Favilli
答案 4 :(得分:5)
如果您是Twitter Bootstrap用户,则应将此行添加到CSS中:
.gmnoprint img { max-width: none; }
答案 5 :(得分:4)
我也有这个问题并使用
.google-maps img {
max-width: none;
}
没用。我最终用了
.google-maps img {
max-width: none !important;
}
它就像一个魅力。
答案 6 :(得分:2)
如果您正在使用Yahoo的Pure CSS,请将您的div设为Bootstrap之类的“google-maps”类,并将此规则放入CSS:
.google-maps img {
max-width: none;
max-height: none;
}
据我所知,Pure CSS无法自行修复此问题。
答案 7 :(得分:0)
你们告诉我的那些选项不适用于我的网站。
我使用Bootstrap V3并专注于功能。主要原因是我给了我的地图一个不同的ID然后用于显示变焦栏的CSS文件与黄色streetvieuw家伙
我将map_canvas重命名为mapholder然后它对我有效!无论如何,谢谢我应该查看CSS文件的提示!
答案 8 :(得分:0)
我尝试了以上所有解决方案,其他论坛的其他人都无济于事。它真的很烦人,因为我有另一个非Wordpress网站,代码完美无缺。 (我试图在Wordpress页面中显示Google地图,但缩放和街景视图控件被扭曲了。)
我所做的解决方案是创建一个新的html文件(将所有代码复制粘贴到记事本中,并将其命名为xyz.html,另存为“所有文件”类型)。然后上传/ ftp到网站,并设置一个新的Wordpress页面并使用嵌入功能。编辑页面时,请转到文本编辑器(而不是可视化编辑器)并复制/输入:
http:// page URL width =“900”height =“950”&gt;
如果您更改尺寸,请记住在上面的两个参数中更改它,否则会得到奇怪的结果。
我们走了 - 可能不像其他一些答案一样聪明,但它对我有用!证据在这里:http://a-bc.co.uk/latitude-longitude-finder/