30

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

例如：

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

好的， !important 不是必需的。通过增加 CSS 选择器的特异性也可以覆盖 google 样式。但这并没有改变我必须覆盖所有谷歌样式。并且roboto字体也会加载。

4

11 回答 11

12

据我所知，新的 css 规则保证会破坏所有标记、控件和信息窗口网络范围的样式，所以这可能不会在 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，然后尝试将您的应用程序与地图 css 中的更改隔离（见下文2）

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

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

您可以通过类似的 css 规则阻止 maps API 设置您的字体大小

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

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

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

您将必须指定元素的绝对大小、相对测量值，例如 em 不会保护您免受潜在更改的影响，例如 font-size: 11px;

于 2013-08-20T04:15:09.277 回答
6

在添加事件侦听器后，我遇到了同样的问题，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 样式。所以你不需要重写任何类或样式。

于 2013-08-19T13:45:13.623 回答
2

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

于 2014-04-23T12:13:38.967 回答
2

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

var labelOptions = {
  content: label,
  boxStyle: {
  //Insert style here
  },
  .
  .
}
于 2013-11-27T13:31:11.830 回答
2 
jQuery('.gm-style').removeClass('gm-style');

或者

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

<div class="overlay-simple-marker"

并将其替换为

<span class="overlay-simple-marker"
于 2013-08-18T09:54:47.640 回答
1

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

发现此问题在 google maps 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

于 2014-03-25T22:56:03.480 回答
1

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

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

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

这不是谷歌地图的一个很好的举措，因为使用了后代选择器（在一个 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 样式可能不起作用。

于 2013-09-16T10:45:21.860 回答
0

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

google.maps.event.addListener(map, 'idle', function() {
        $$('.gm-style').invoke('removeClassName', 'gm-style');
});
于 2014-02-19T04:14:53.793 回答
0

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

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

    $('style').remove();

});

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

于 2014-02-20T12:51:46.673 回答
0

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

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

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

  1. 之前设置css文件的链接！页头中的 google api。

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

于 2016-01-04T10:41:45.457 回答
0

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

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

或将您的 Google 地图放入容器中，并在容器中设置 .gm-style 样式：

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

并在您的 CSS 样式定义中：

.MapContainer .gm-style { font: initial; }
于 2020-03-06T15:23:56.750 回答