谷歌地圖視覺刷新 - 如何在InfoWindow中禁用字體Roboto

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或樣式表以任何方式設置樣式。 這個小提琴的例子：

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內容並按照此答案中的建議設置樣式。

但是，您需要具有更高特異性的CSS規則。 看到這個小提琴（從Michael Gearys 小提琴分叉）：

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

Answer 3

如果你像我一樣懶惰，你就可以通過一次性來超越谷歌。 簡單地重新定義他們自己的身體定義附帶的邪惡風格。

〜我在示例中使用了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。 這個答案可能不值得被標記為黑客商店3.1。

Answer 4

使用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（但它將使用mod）。 適用於我們的案例， 但我不知道這種方法是否與其他東西相互影響。

谷歌地圖視覺刷新 - 如何在InfoWindow中禁用字體Roboto

問題描述

4 個解決方案

解決方案1
7 已采納 2013-05-17 16:51:13

解決方案2
1 2013-07-04 09:54:00

解決方案3
1 2013-09-12 02:34:41

解決方案4
0 2017-09-29 14:01:31

谷歌地圖視覺刷新 - 如何在InfoWindow中禁用字體Roboto

問題描述

4 個解決方案

解決方案1 7 已采納 2013-05-17 16:51:13

解決方案2 1 2013-07-04 09:54:00

解決方案3 1 2013-09-12 02:34:41

解決方案4 0 2017-09-29 14:01:31

解決方案1
7 已采納 2013-05-17 16:51:13

解決方案2
1 2013-07-04 09:54:00

解決方案3
1 2013-09-12 02:34:41

解決方案4
0 2017-09-29 14:01:31