Question

只需在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中的默认字体定义吗？

Answer 1

您仍然可以在InfoWindow中使用自己的字体。只需提供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; }

Answer 2

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

但是，您需要具有更高特异性的CSS规则。请参阅此fiddle（从Michael Gearys fiddle分叉）：

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

Answer 3

如果你像我一样懒惰，你可以通过一次性超越谷歌来超越谷歌。简单地重新定义他们自己的身体定义所附带的邪恶风格。

〜我在示例中使用了SASS，但你可以通过将def's删除为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。这个答案可能不值得被标记为黑客商店3.1。

Answer 4

使用javascript时使用地图你可以用javascript监听器来解决这个问题。将此代码段中的<{1}}标记粘贴到源代码中的MAP html内容的输出<（例如 <script>部分中）：

<head>

对于所有动态加载的调用，它不会“咬”到标题中，因为Google在各种视图更新中使用的方法不同。这仅涵盖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); };方法。

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

谷歌地图视觉刷新 - 如何在InfoWindow中禁用字体Roboto

4 个答案: