在Google地图中停用CSS样式（3.14）信息窗口 [英] Disable CSS Styles in Google Maps (3.14) Infowindow

问题描述

在Google地图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样式div，.gm样式跨度，.gm样式标签{
 text-decoration：none 
} 
 
 .gm样式a，.gm样式标签{
 display：inline 
} 
 
 .gm-style div { 
 display：block 
} 
 
 .gm-style img {
 border：0; 
 padding：0; 
 margin：0 
} 
  

我必须通过！important覆盖此Google样式吗？

编辑：

也将加载字体Roboto。

p> Ok，！important不是必需的。覆盖google样式也可能增加CSS选择器的特异性。但这不改变，我必须覆盖所有的google样式。

解决方案

从我可以看到的新css规则保证打破所有标记的样式，控制和信息窗口网，所以也许这将不会留在3.exp版本足够长的时间成为正式版本的一部分。在此期间，保护你自我打破这样的变化。您应该可以做两件事：

1在您的地图api的链接上设置一个版本。像

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

将确保您始终访问当前版本的maps API。如果你想更保守，你可以指定主要和次要版本。如果您指定了主要版本和次要版本，那么您可以测试对地图API的更新，作为您的常规发布计划的一部分。如果你正在访问的地图API作为包装的移动应用程序的一部分，那么你无法控制，当你的用户更新你的应用程序，所以你可能想只是设置v = 3，然后尝试将你的应用程序与地图css见下面的2.）

2调整标记，控制或信息窗口，以便更好地控制样式。例如，如果您有一个类似

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

您可以防止地图API使用css规则设置字体大小，例如

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

注意， p>

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

您必须指定绝对大小你的元素，相对测量，像em不会保护你免受潜在的变化，例如，font-size：11px;

In google maps version 3.14 there are some new css rules added for the custom infowindow. I use the infobox plugin and now many of my elements styles are overwritten.

For example:

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

Is there any way to change that except that I have to overwrite this google styles via "!important"?

EDIT:

The font "Roboto" will be also loaded. If you care about performance, then that is not really great.

EDIT2:

Ok, !important isn't necessary. Overwriting the google styles is also possible with increasing the specificity of the CSS selectors. But this doesn't change that I have to overwrite all google styles. And the roboto font will loaded too.

解决方案

From what I can see the new css rules are guaranteed to break styling for all markers, controls and info windows web wide, so maybe this will not remain in the 3.exp version long enough become part of an official release. In the meantime to protect you self against breaking changes like this. You should probably do two things:

1 Set a version on your link to the maps api. Something like

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

will make sure that you are always accessing the current release version of the maps API. If you want to be more conservative you can specify the major and minor releases as well. If you specify a major and minor version then you can test updates to the maps API as part of your regular release schedule. If you are accessing the maps API as part of a wrapped mobile application then you cant control when your users update your app, so you will probably want to just set v=3 and then try to insulate your app from changes in the maps css (see 2. below)

2 Style your markers, controls, or info windows so that you better control the styling. For example, if you have a marker with html like

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

You can prevent the maps API from setting you font size by a css rule like

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

Note, given maps API styles like

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

you will have to specify the absolute sizes of you elements, relative measurements, like em's wont protect you against potential changes to, for example, font-size: 11px;

这篇关于在Google地图中停用CSS样式（3.14）信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！