Javascript 谷歌地图缩放控制一团糟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8879544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps zoom control is messed up
提问by Dónal
I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn't always like this). I have no idea what the cause is.
我使用 Google Maps API (v.3) 来显示带有几个标记的地图。我最近注意到用于缩放地图的控件搞砸了（并不总是这样）。我不知道是什么原因。
Update
更新
This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.
这篇文章最初有一个指向您可以查看问题的页面的链接，但该链接现在已损坏，因此我已将其删除。
采纳答案by Konrad Dzwinel
Your CSS messed it up. Remove max-width: 100%;in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.
你的 CSS 搞砸了。删除max-width: 100%;第 814 行，缩放控件将再次正常显示。为避免此类错误，请在 CSS 中使用更具体的选择器。
回答by Aligned
#myMap_canvas img {
max-width: none;
}
fixed it for me, but I also wanted to point out the comment on the question by @Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.
为我修复了它，但我也想指出@Ben 对这个问题的评论，“如果您使用 is map_canvas 作为地图 div id，Bootstrap 不会发生此问题”。他是对的。我没有使用 Bootstrap，但是在更改 div id 后问题开始发生。
Setting it back to map_canvas fixed it without the max-width change.
将其设置回 map_canvas 修复了它，而没有更改最大宽度。
<div id="map_canvas"></div>
回答by woens
If you're using Bootstrap, just give it "google-maps" class. This worked for me.
如果您使用 Bootstrap，只需给它“google-maps”类。这对我有用。
As an alternative you might reset everything for the google map div as a kind of last-resort solution:
作为替代方案，您可以将 google map div 的所有内容重置为一种最后的解决方案：
HTML:
HTML：
<div class="mappins-map"><div>
CSS:
CSS：
.mappins-map img {
max-width: none !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
回答by poostchi
Just share @Max-Favilli answer:
只需分享@Max-Favill 的答案：
With latest version of google maps api you need this:
使用最新版本的 google maps api，您需要：
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Thanks to @Max-Favilli
感谢@Max-Favill
回答by Fernando Prieto
If you're a Twitter Bootstrap user you should add this line to your CSS:
如果您是 Twitter Bootstrap 用户，则应将此行添加到您的 CSS：
.gmnoprint img { max-width: none; }
回答by Dylan Becks
I had this problem as well and using
我也有这个问题并使用
.google-maps img {
max-width: none;
}
didn't work. I eventually used
没有用。我最终使用了
.google-maps img {
max-width: none !important;
}
and it worked like a charm.
它就像一个魅力。
回答by dmzza
If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:
如果您使用 Yahoo 的 Pure CSS，请为您的 div 提供类似 Bootstrap 的“google-maps”类，并将此规则放入您的 CSS 中：
.google-maps img {
max-width: none;
max-height: none;
}
As far as I can tell, Pure CSS has no way of fixing this issue on its own.
据我所知，纯 CSS 无法自行解决此问题。
回答by Impiriumjbb
Those options you guys told me didn′t work for my website.
你们告诉我的那些选项不适用于我的网站。
I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy
我使用 Bootstrap V3 并专注于功能。主要原因是我给了我的地图一个不同的 ID，然后用于显示黄色街景家伙的缩放栏的 CSS 文件
I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!
我将 map_canvas 重命名为 mapholder 然后它对我有用！无论如何，感谢提示我应该查看 CSS 文件！
回答by Glyn
I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).
我尝试了上述所有解决方案，其他论坛的其他解决方案均无济于事。这真的很烦人，因为我有另一个非 Wordpress 站点，代码运行良好。（我试图在 Wordpress 页面中显示 Google 地图，但缩放和街景控件失真）。
The solution I did was to create a new html file (copy paste all the code into Notepad and name it xyz.html, save as type "all files"). Then upload/ftp it up to website, and setup a new Wordpress page and use an embed function. When editing the page go to the text editor (not the visual editor) and copy/type:
我所做的解决方案是创建一个新的 html 文件（将所有代码复制粘贴到记事本中并将其命名为 xyz.html，另存为“所有文件”类型）。然后将其上传/ftp 到网站，并设置一个新的 Wordpress 页面并使用嵌入功能。编辑页面时，转到文本编辑器（不是可视化编辑器）并复制/键入：
http://page URL width="900" height="950">
http://页面 URL width="900" height="950">
If you change the dimensions, remember to change it in both arguments above, or you get weird results.
如果您更改尺寸，请记住在上面的两个参数中更改它，否则您会得到奇怪的结果。
There we go - might not be as clever as some other answers, but it worked for me! Evidence here: http://a-bc.co.uk/latitude-longitude-finder/
我们走了 - 可能不像其他一些答案那么聪明，但它对我有用！这里的证据：http: //a-bc.co.uk/latitude-longitude-finder/
