在Google地图中禁用CSS样式(3.14)Infowindow

Question

在谷歌地图版本3.14中,为自定义信息窗口添加了一些新的CSS规则.我使用信息块插件,现在我的许多元素样式都被覆盖了.

例如:

.gm-style div,.gm-style span,.gm-style label,.gm-style a {
    font-family: Roboto,Arial,sans-serif; 
    font-size:11px;
    font-weight:400
}

.gm-style div,.gm-style span,.gm-style label {
    text-decoration:none
}

.gm-style a,.gm-style label {
    display:inline
}

.gm-style div {
    display:block
}

.gm-style img {
    border: 0; 
    padding: 0;
    margin: 0
}

有没有办法改变它,除了我必须通过"!important"覆盖这个谷歌样式？

编辑:

字体"Roboto"也将被加载.如果你关心性能,那就不是很好.

EDIT2:

好的,重要的是没有必要.通过增加CSS选择器的特异性,也可以覆盖谷歌样式.但这并没有改变我必须覆盖所有谷歌风格.而且roboto字体也会被加载.

Answer 1

从我可以看到的新css规则保证打破所有标记,控件和网络范围内的信息窗口的样式,所以也许这将不会保留在3.exp版本足够长的时间成为正式版本的一部分.同时保护自己免受这种变化的影响.你应该做两件事:

1在链接上设置地图api的版本.就像是

<script src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true" type="text/javascript"></script>

将确保您始终访问Maps API的当前发行版本.如果你想更保守,你也可以指定主要和次要版本.如果您指定主要版本和次要版本,那么您可以测试对映射API的更新,作为常规发布计划的一部分.如果您作为包装的移动应用程序的一部分访问maps API,那么您无法控制用户何时更新您的应用程序,因此您可能只想设置v = 3然后尝试将您的应用程序与地图css中的更改隔离(见下文2.)

2为您的标记,控件或信息窗口设置样式,以便更好地控制样式.例如,如果你有一个像html的标记

<div class="my-marker">...</div>

您可以阻止maps API按照css规则设置字体大小

div.my-marker {
  font-size: 18px;
  ...
}

注意,给出地图API样式之类的

.gm-style div {
  font-size: 11px;
  ...
}

您必须指定元素的绝对大小,相对测量值,例如,它们不会保护您免受可能的更改,例如,font-size:11px;

Answer 2

在我加入一个事件监听器之后,我遇到了同样的问题并且Emads的答案对我很有用.

google.maps.event.addListener(map, 'idle', function()
{
    jQuery('.gm-style').removeClass('gm-style');
});

问题是我仍然看不到任何方法来阻止谷歌加载Roboto字体.

编辑:嗯...有一个非常简单的方法,以阻止它.只需使用GET加载旧版本的谷歌API,如下所示:

<script src="http://maps.google.com/maps/api/js?v=3.13&sensor=false"></script>

在这个API版本中,谷歌根本不会改变gm风格.所以你不需要覆盖任何类或样式.

Answer 3

jQuery('.gm-style').removeClass('gm-style');

或者

在文件/wp-content/themes/rentbuy/js/scripts.js中找到它

<div class="overlay-simple-marker"

并将其替换为

<span class="overlay-simple-marker"