在谷歌地图(3.14）信息窗口中禁用CSS样式

Disable CSS Styles in Google Maps (3.14) Infowindow

本文关键字：窗口 样式 CSS 信息窗 信息 谷歌地图      更新时间：2023-09-26

在谷歌地图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"也将被加载。如果你关心性能，那并不是很好。

编辑2：

好的，重要的不是必需的。通过增加CSS选择器的特异性，也可以覆盖谷歌样式。但这并没有改变我必须覆盖所有谷歌样式。机器人字体也将加载。

据我所知，新的 css 规则保证会破坏所有标记、控件和信息 Windows Web 范围的样式，所以也许这不会在 3.exp 版本中保留足够长的时间成为正式版本的一部分。同时，为了保护自己免受此类重大更改的影响。您可能应该做两件事：

1 在地图 API 的链接上设置版本。类似的东西

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

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

2 设置标记、控件或信息窗口的样式，以便更好地控制样式。例如，如果你有一个带有 html 的标记，例如

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

您可以阻止地图 API 通过 css 规则设置您的字体大小，例如

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

请注意，给定地图 API 样式，例如

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

您必须指定元素的绝对大小，相对测量值，例如EM不会保护您免受潜在的更改，例如字体大小：11px;

我遇到了同样的问题，在我添加事件侦听器后，Emads 的答案对我来说效果很好。

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

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

编辑：嗯...有一个非常简单的方法可以阻止这种情况。只需使用 GET 加载旧版本的 google API，如下所示：

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

在这个API版本中，谷歌根本不会改变gm风格。因此，您无需覆盖任何类或样式。

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

或

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

<div class="overlay-simple-marker"

并将其替换为

<span class="overlay-simple-marker"

InfoBox还在选项中提供了样式元素

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

对于那些关注此问题的人，请参阅此线程中谷歌的帖子：https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

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

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

有关更多详细信息，请参阅视觉刷新中的更改。

对于谷歌地图来说，这不是一个非常好的举动，因为使用了后代选择器(在div子项上！(，这根本不有效。

要解决此问题，您将需要非常具体的内容，如下所示：

给定的网页

<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 样式可能不起作用。

自 3.14 推出以来，我也一直在为添加的 gm 样式和 Roboto 字体加载而苦苦挣扎。

发现此问题在谷歌地图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<</p>

div class="answers"上加星并发表评论>

为了响应dorr Baums解决方案，对于那些使用原型js的人，您可以使用以下内容来删除此类。

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

由于谷歌改变了旧版本的行为，加载 v1.13 将不再有效。新样式和机器人字体将始终加载。我的新解决方案是将每个样式表保存到一个单独的文件中，并包含以下脚本：

google.maps.event.addListener(map, 'idle', function()
{
    $('style').remove();
});

这将删除由googles api编写的每个样式标签，并保留您自己的样式保存，但仍会加载roboto字体。我看不出有什么办法可以阻止这一点。

我通过执行以下操作在地图上修复了这个问题。希望对你有帮助

  1. 在信息窗口中创建我自己的div并设置自己的css。

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

  1. 在页面标题中设置指向 css 文件的链接！

  2. 按住 Ctrl 并单击浏览器上的刷新以强制完全刷新以加载任何 css 更改。我正在使用火狐。

不是通过 DOM 操作删除类，也不是使用显然大多不需要的旧 Google 地图版本，而是通过重置 font 属性来全局停用样式：

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

或者把你的谷歌地图放进一个容器里，在你的容器内设置.gm样式：

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

在您的 CSS 样式定义中：

.MapContainer .gm-style { font: initial; }
相关文章：