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

只是在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 ?

您仍然可以在InfoWindow中使用自己的字体。只需提供HTML内容而不是纯文本，您可以使用内联CSS或样式表以任何您想要的方式对其进行样式化。本例:

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; }

使用HTML内容，并按照这个答案的建议设置样式。

但是，您需要一个具有更高特异性的CSS规则。请看这个小提琴(从Michael Gearys的小提琴衍生而来):

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

如果你像我一样很懒，你可以比他们更具体。只需重新定义自己的邪恶风格附加到您的body定义。

~我在这个例子中使用的是SASS，但你可以通过将def放到root并添加body来滚动你自己的香草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}
}

这种方法是适当的脆弱，但肯定会修补你的不稳定的字体快速拼接。这个答案可能不值得被标记为hackshop 3.1。

当你使用javascript时，你可以使用javascript侦听器来解决这个问题。将此代码片段粘贴在<script>标签中的某个地方，在 MAP html内容的输出之前(例如在 <head>部分中，就像我所做的那样):

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);
};

它不会"咬"所有的动态加载调用到标题，因为谷歌使用的方法在不同的视图更新不同。这只包括head.insertBefore方法。

/仅在现代浏览器如2017，而不是ie8(但与mods将)。适用于我们的情况，但我不知道这个方法是否与和其他东西相互作用

相关内容

最新更新

热门标签：