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规则可以保证打破所有标记，控件和Web界面信息窗口的样式，所以这可能不会保留在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');

OR

在文件 /wp-content/themes/rentbuy/js/scripts.js

中找到此信息

<div class="overlay-simple-marker"

并将其替换为

<span class="overlay-simple-marker"

Answer 4

InfoBox还在options

中提供了样式元素

var labelOptions = {
  content: label,
  boxStyle: {
  //Insert style here
  },
  .
  .
}

Answer 5

这是版本3.14中的重大更改，因为元素现在由CSS而不是内联设置样式。

标签和UI元素中使用的默认字体已更改。 UI 元素由CSS用CSS设置样式，这意味着自定义CSS 如果在地图上定位DOM元素可能需要进行一些调整您希望这些应用而不是新的默认样式。

有关详细信息，请参阅changes in visual refresh。

这不是谷歌地图的一个很好的举动，因为使用了后代选择器（在div孩子身上！），这些都没有效率。

要解决此问题，您需要具备以下内容：

给定HTML

<div class="gm-style">
 <div class="myClass-parent">
    <div class="myClass">Lorem ipsum dolor</div>
 </div>
</div>

尝试类似

的内容

.myClass-parent > div.myClass 
{
  font-weight:600;
}

简单地设计div.myClass可能不起作用。

Answer 6

自从引入3.14以来，我也一直在努力添加gm-styles和Roboto字体加载。

发现此问题报告为＆＃34;错误＆＃34;在谷歌地图API代码库。请在http://code.google.com/p/gmaps-api-issues/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal&groupby=&sort=&id=6078

加注星标并对其发表评论

Answer 7

对于发布此问题的用户，请参阅此主题中谷歌的帖子： https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

Answer 8

对于dorr Baums解决方案，对于使用原型js的人，您可以使用以下内容删除此类。

google.maps.event.addListener(map, 'idle', function() {
        $$('.gm-style').invoke('removeClassName', 'gm-style');
});

Answer 9

由于Google更改了旧版本的行为，因此无法再加载v1.13。新样式和roboto-font将始终加载。我的新解决方案是将每个样式表保存到单独的文件中，并包含以下脚本：

google.maps.event.addListener(map, 'idle', function()
{

    $('style').remove();

});

这将删除googles api编写的每个样式标记，并保留自己的样式保存，但仍会加载roboto字体。我认为没有办法阻止它。

Answer 10

我通过执行以下操作将其修复到我的地图上。希望它有所帮助

在infowindow中创建我自己的div并设置自己的css。

<div class='iw'>infowindow content</div>

设置之前的css文件链接！页眉中的谷歌api。
按住Ctrl＆amp;单击浏览器上的刷新以强制完全刷新以加载任何CSS更改。我使用的是Firefox。

Answer 11

与其通过DOM操作删除该类，而不是使用显然不受欢迎的旧版Google Maps，而是通过重置font属性，简单地在全局范围内停用样式：

.gm-style { font: initial !important; }

或将您的Google Map放入容器中，然后在容器内设置.gm-style：

<div class="MapContainer">
  [google map component here]
</div>

以及您的CSS样式定义中：

.MapContainer .gm-style { font: initial; }

在Google地图中禁用CSS样式（3.14）Infowindow

11 个答案: