Google Maps 视觉刷新 - 如何在 InfoWindow 中禁用字体 Roboto答案

【问题标题】：Google Maps visual refresh - how do disable font Roboto in InfoWindowGoogle Maps 视觉刷新 - 如何在 InfoWindow 中禁用字体 Roboto
【发布时间】：2013-05-12 21:01:18
【问题描述】：

只是在 Google 地图 JavaScript API 的新版本 3.12 中尝试新选项 google.maps.visualRefresh = true。虽然地图的新外观很棒，但现在我的 InfoWindows 中的文本使用的是 Roboto 字体大小。

新的 InfoWindow 内容 div CSS 是：

font-family: Roboto, Arial, sans-serif;
font-size: 13px;
font-weight: 300;

以前不是这种情况，它根本不适用于我的网站设计。知道如何删除它以使用 body 中定义的默认字体吗？

【问题讨论】：

你很可能不能。尝试用 CSS 覆盖它，但我的钱是因为 Roboto 是 Google 的首选字体，仅此而已。

标签： javascript css google-maps google-maps-api-3

【解决方案1】：

在使用 javascript 使用地图时，您可以使用 javascript 侦听器解决此问题。将此 sn-p 粘贴在 <script> 标记中之前源代码中 MAP html 内容的输出（例如在 <head> 部分中，就像我一样）： p>

var head = document.getElementsByTagName('head')[0];
var insertBefore = head.insertBefore;
head.insertBefore = function (newElement, referenceElement){
    if(newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {
        console.info('Prevented Roboto font from loading!');
        return;
    }

    // intercept style elements for modern browsers
    if(newElement.tagName.toLowerCase() === 'style' && newElement.innerHTML.indexOf('.gm-style') > -1){
        console.info('Prevented .gm-style from loading!');
        return;
    }
    insertBefore.call(head, newElement, referenceElement);
};

它不会将所有动态加载的调用都“咬”到标头中，因为 Google 对视图的各种更新使用的方法不同。这仅涵盖head.insertBefore 方法。

/ 仅在 2017 年的现代浏览器中，而不是 ie8（但使用 mods 会）。适用于我们的案例但我不知道这种方法是否会干扰其他东西。

【讨论】：

【解决方案2】：

如果您像我一样非常懒惰，则可以通过将它们加一来超越 Google。只需重新定义他们自己的邪恶风格附加到您的身体定义。

~ 我在示例中使用的是 SASS，但您可以通过将 def 放到 root 并粘贴在“body”上来滚动您自己的 vanilla CSS。到处都是~

html, body {
 font-family: Helvetica, Arial, sans-serif;
 # steal/borrow their own styles to be used against them.
 # in this example I have set the font to 'comical' size.
 .gm-style div,
 .gm-style span,
 .gm-style label,
 .gm-style a { font-family:Helvetica,Arial,sans-serif;font-size:200px;font-weight:2000}.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}
}

这种方法相当脆弱，但肯定会修补你不稳定的字体 quickedy splix。这个答案可能不值得被标记为 hackshop 3.1。

【讨论】：

【解决方案3】：

使用 HTML 内容并按照this answer 中的建议设置样式。

但是，您需要具有更高特异性的 CSS 规则。看到这个fiddle（来自Michael Gearys fiddle）：

#mapbox .myinfo { font-family:Georgia,serif; font-size:18px; }

【讨论】：

【解决方案4】：

您仍然可以在信息窗口中使用自己的字体。只需提供 HTML 内容而不是纯文本，您就可以使用内联 CSS 或样式表以任何方式对其进行样式设置。这个fiddle中的例子：

var infowindow = new google.maps.InfoWindow({
    map: map,
    position: center,
    content: '<div class="myinfo">Computer History!</div>'
});

使用这个 CSS：

.myinfo { font-family:Georgia,serif; font-size:18px; }

【讨论】：