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

只需在Google Maps JavaScript API的新版本3.12中嘗試新選項google.maps.visualRefresh = true即可。雖然地圖新外觀很好，但是現在我的InfoWindows中的文本正在使用字體大小Roboto。谷歌地圖可視化刷新 - 如何在InfoWindow中禁用字體Roboto

新的信息窗口的內容DIV + CSS是：

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

這是以前沒有的情況下，並沒有與我的網站的設計，在所有工作。任何想法如何刪除它以使用我的body中定義的默認字體？

來源

2013-05-17 Johann

你很可能不能。嘗試用CSS覆蓋它，但我的錢是因爲Roboto是Google首選的字體，就是這樣。 – Kyle

您仍然可以在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; }

來源

2013-05-17 16:51:13

使用HTML內容和風格像在暗示this answer。

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

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

來源

2013-07-04 09:54:00 emilkaiser

如果你是非常懶惰，因爲我，你可以出specifitize谷歌通過一個正在增加他們。只需重新定義自己的邪惡風格附加到你的身體定義。

〜我在示例中使用了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} 
}

這種做法是合適的，但脆肯定會修補揭掉靠不住的字體quickedy splix。這個答案可能不值得被標記爲比hackshop 3.1更多的東西。

來源

2013-09-12 02:34:41 lucygenik

雖然使用javascript映射your'e，但您可以使用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); 
};

它不會「咬」的所有動態加載的通話進入標題，因爲Google在視圖的各種更新中使用的方法不同。這隻涵蓋了head.insertBefore方法。

/只在2017年的現代瀏覽器中，而不是ie8（但它與mods會）。適用於我們的案例但我不知道這種方法是否與其他東西干涉。

來源

2017-09-29 14:01:31

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

回答

相關問題