5

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

新的 InfoWindow 内容 div CSS 是：

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

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

4

4 回答 4

8

您仍然可以在 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; }
于 2013-05-17T16:51:13.373 回答
1

如果您像我一样非常懒惰，则可以通过将它们提升一个来超越 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。

于 2013-09-12T02:34:41.430 回答
1

使用此答案中建议的 HTML 内容和样式。

但是，您需要具有更高特异性的 CSS 规则。看到这个小提琴（从Michael Gearys fiddle分叉）：

#mapbox .myinfo { font-family:Georgia,serif; font-size:18px; }
于 2013-07-04T09:54:00.747 回答
0

在使用 javascript 使用地图时，您可以使用 javascript 侦听器解决此问题。将此片段粘贴到源代码中 MAP html 内容输出之前<script>的某个标记中（例如，在我所做的部分中）：<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);
};

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

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

于 2017-09-29T14:01:31.807 回答