blocks|key|210584|text|你的CSS搞砸了。删除814行中的max-width:+100%25;，缩放控件看起来又会很好。为了避免这样的bug，在CSS中使用更具体的选择器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|210585|entityMap^0|H|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Your CSS messed it up. Remove <code>max-width: 100%;</code> in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.

blocks|key|210624|text|#myMap_canvas+img+{
++++max-width:+none;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|210625|为我修复了它，但我也想指出@Ben对这个问题的评论，“如果你使用is+map_canvas作为map+div+id，这个问题就不会在Bootstrap中发生”。他是对的。我没有使用Bootstrap，但这个问题是在我更改了div+id之后开始出现的。|unstyled|210626|将它重新设置为map_canvas可以在不更改最大宽度的情况下修复它。|210627|<div+id="map_canvas"></div>|210628|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre class="lang-css prettyprint-override"><code>#myMap_canvas img {
 max-width: none;
}
</code></pre>

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. 

Setting it back to map_canvas fixed it without the max-width change.

<pre><code>&lt;div id="map_canvas"&gt;&lt;/div&gt;
</code></pre>

blocks|key|4251394|text|如果你使用的是Bootstrap，只需要给它一个“google-map”类。这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4251395|作为一种替代方案，您可以重置google+map+div的所有内容，作为一种最后的解决方案：|4251396|HTML：|4251397|<div+class="mappins-map"><div>+|code-block|syntax|javascript|4251398|CSS：|4251399|.mappins-map+img+{+
++++max-width:+none+!important;+
++++height:+auto+!important;+
++++background:+none+!important;
++++border:+0+!important;
++++margin:+0+!important;
++++padding:+0+!important;
}|4251400|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

If you're using Bootstrap, just give it "google-maps" class. This worked for me.

As an alternative you might reset everything for the google map div as a kind of last-resort solution:

HTML:

<pre><code>&lt;div class="mappins-map"&gt;&lt;div&gt; 
</code></pre>

CSS:

<pre class="lang-css prettyprint-override"><code>.mappins-map img { 
 max-width: none !important; 
 height: auto !important; 
 background: none !important;
 border: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
}
</code></pre>

blocks|key|4251641|text|只需分享@Max-Favilli答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4251642|使用最新版本的google地图api，您需要：|4251643|<style>
.gm-style+img+{+max-width:+none;+}
.gm-style+label+{+width:+auto;+display:+inline;+}
</style>|code-block|syntax|javascript|4251644|感谢@Max-Favilli|4251645|https://stackoverflow.com/a/19339767/3070027|offset|length|4251646|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

Just share @Max-Favilli answer:

With latest version of google maps api you need this:

<pre><code>&lt;style&gt;
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
&lt;/style&gt;
</code></pre>

Thanks to @Max-Favilli

<a href="https://stackoverflow.com/a/19339767/3070027">https://stackoverflow.com/a/19339767/3070027</a>

blocks|key|338144|text|如果你是Twitter+Bootstrap用户，你应该把这一行添加到你的CSS中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|338145|.gmnoprint+img+{+max-width:+none;+}+|code-block|syntax|javascript|338146|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you're a Twitter Bootstrap user you should add this line to your CSS:

<pre class="lang-css prettyprint-override"><code>.gmnoprint img { max-width: none; } 
</code></pre>

blocks|key|338161|text|我也遇到了这个问题，并使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|338162|.google-maps+img+{
++++max-width:+none;
}|code-block|syntax|javascript|338163|没有起作用。我最终使用了|338164|.google-maps+img+{
++++max-width:+none+!important;
}|338165|它就像一个护身符一样起作用。|338166|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I had this problem as well and using 

<pre class="lang-css prettyprint-override"><code>.google-maps img {
 max-width: none;
}
</code></pre>

didn't work. I eventually used 

<pre class="lang-css prettyprint-override"><code>.google-maps img {
 max-width: none !important;
}
</code></pre>

and it worked like a charm.

blocks|key|4251453|text|如果你使用的是Yahoo的Pure+CSS，给你的div一个类似Bootstrap的“google-map”类，然后把这个规则放入你的CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4251454|.google-maps+img+{
++++max-width:+none;
++++max-height:+none;
}|code-block|syntax|javascript|4251455|据我所知，Pure+CSS没有办法自己解决这个问题。|4251456|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:

<pre class="lang-css prettyprint-override"><code>.google-maps img {
 max-width: none;
 max-height: none;
}
</code></pre>

As far as I can tell, Pure CSS has no way of fixing this issue on its own.

blocks|key|210729|text|你们告诉我的那些选项对我的网站不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|210730|我使用Bootstrap+V3并专注于其功能。主要原因是我为我的地图指定了一个不同于CSS文件的ID，该文件用于显示带有黄色streetvieuw成员的缩放条|210731|我将map_canvas重命名为mapholder，然后它对我起作用了！无论如何，谢谢你给我的提示，让我看看CSS文件！|210732|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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

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!

blocks|key|337469|text|我尝试了上面所有的解决方案，以及其他论坛上的其他解决方案，但都没有效果。这真的很烦人，因为我还有另一个非Wordpress的站点，在那里代码运行得很好。(我试图在Wordpress页面中显示Google地图，但是缩放和Streetview控件被扭曲了)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|337470|我所做的解决方案是创建一个新的html文件(将所有代码复制粘贴到记事本中，并将其命名为xyz.html，另存为“所有文件”)。然后上传/ftp到网站，设置一个新的Wordpress页面并使用嵌入功能。在编辑页面时，转到文本编辑器(而不是可视化编辑器)并复制/键入：|337471|http://page+URL+width="900“height="950">|offset|length|337472|如果你改变了尺寸，记得在上面的两个参数中都改变它，否则你会得到奇怪的结果。|337473|我们开始了--可能不像其他一些答案那么聪明，但它对我很有效！这里的证据：http://a-bc.co.uk/latitude-longitude-finder/|337474|entityMap|0|LINK|mutability|MUTABLE|url|http://page/|1|http://a-bc.co.uk/latitude-longitude-finder/^0|0|0|0|B|0|0|0|10|18|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@$F|13|G|14|1|15]]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]]]

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

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:

http://page 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: <a href="http://a-bc.co.uk/latitude-longitude-finder/" rel="nofollow">http://a-bc.co.uk/latitude-longitude-finder/</a>

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.

<img src="https://i.stack.imgur.com/z7OpZ.jpg" alt="enter image description here">

<h3>Update</h3>

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.

Google Maps zoom control is messed up

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我使用Google Maps API (v.3)来显示带有几个标记的地图。我最近注意到用来缩放地图的控件被弄乱了(它并不总是这样的)。我不知道原因是什么。​​更新这篇文章原本有一个页面的链接，你可以在那里查看这个问题，但现在这个链接被破坏了，所以我删除了它。

问谷歌地图缩放控制混乱
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌地图缩放控制混乱EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌地图缩放控制混乱
EN