Google Maps缩放控件搞砸了

2020/10/23 13:02 · javascript ·  · 0评论

我使用Google Maps API(v.3)来显示带有几个标记的地图。我最近注意到,用于缩放地图的控件被弄乱了(并不总是这样)。我不知道是什么原因。

在此处输入图片说明

更新资料

该帖子最初具有指向您可以查看问题的页面的链接,但是该链接现在已断开,因此我已将其删除。

您的CSS搞砸了。max-width: 100%;在第814行删除,缩放控件将再次正常显示。为了避免此类错误,请在CSS中使用更具体的选择器。

#myMap_canvas img {
    max-width: none;
}

为我修复了该问题,但我还想指出@Ben对问题的评论:“如果使用is map_canvas作为地图div ID,则Bootstrap不会发生此问题”。他是对的。我没有使用Bootstrap,但是在更改div ID之后,问题开始发生。

将其设置回map_canvas可以修复它,而不会更改最大宽度。

<div id="map_canvas"></div>

如果您使用的是Bootstrap,只需为其提供“ google-maps”类。这对我有用。

作为一种替代方法,您可以将Google Map 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;
}

只需分享@ Max-Favilli答案:

使用最新版的Google Maps api,您需要这样做:

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

感谢@ Max-Favilli

https://stackoverflow.com/a/19339767/3070027

如果您是Twitter Bootstrap用户,则应将此行添加到CSS:

.gmnoprint img { max-width: none; } 

我也有这个问题,并使用

.google-maps img {
    max-width: none;
}

没用。我最终用了

.google-maps img {
    max-width: none !important;
}

它就像一种魅力。

如果您使用的是Yahoo的Pure CSS,请为div提供类似于Bootstrap的“ google-maps”类,然后将此规则放入CSS中:

.google-maps img {
    max-width: none;
    max-height: none;
}

据我所知,Pure CSS无法自行解决此问题。

你们告诉我的这些选项不适用于我的网站。

我使用Bootstrap V3并专注于功能。主要原因是我给了地图一个不同的ID,然后使用了与黄色的streetvieuw家伙一起显示缩放栏的CSS文件

我将map_canvas重命名为mapholder,然后对我有用!无论如何,感谢您提示我应该查看CSS文件的提示!

我尝试了上述所有解决方案,以及其他论坛的其他解决方案,均无济于事。这真的很烦人,因为我在另一个非Wordpress网站上代码运行良好。(我试图在Wordpress页面中显示Google地图,但是缩放和街景视图控件变形了)。

我所做的解决方案是创建一个新的html文件(将所有代码复制粘贴到记事本中,并将其命名为xyz.html,另存为“所有文件”类型)。然后将其上传/通过ftp上传到网站,并设置一个新的Wordpress页面并使用嵌入功能。编辑页面时,转到文本编辑器(而不是可视编辑器)并复制/键入:

http://页面网址width =“ 900” height =“ 950”>

如果更改尺寸,请记住在以上两个参数中都进行更改,否则会得到奇怪的结果。

我们走了-可能不像其他答案那么聪明,但这对我有用!此处的证据:http//a-bc.co.uk/latitude-longitude-finder/

本文地址:http://javascript.askforanswer.com/google-mapssuofangkongjiangaozale.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!