嵌入 Google 地图更改网站字体
Embedding Google Map changes website font
我正在创建一个联系页面,我希望在该页面上有一张指向我所在位置的地图。
问题是,一旦我嵌入地图,页面上的字体就会改变(通过浏览该域的其他页面自行查看)。嵌入有两个部分:
头部标签之间的代码
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
BODY 标签之间的代码
<div style="overflow:hidden;height:400px;width:450px;">
<div id="gmap_canvas" style="height:400px;width:450px;"></div>
</div>
<script type="text/javascript">
function init_map(){
var myOptions = {
zoom:11,
center:new google.maps.LatLng(46.0475235,20.096552599999995),
mapTypeId: google.maps.MapTypeId.TERRAIN};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(46.0475235, 20.096552599999995)});
infowindow = new google.maps.InfoWindow({
content:"<b>MEGA d.o.o.</b><br/>Nenada Valceva 39<br/>23330 Novi Knezevac" });
google.maps.event.addListener(marker, "click",
function(){infowindow.open(map,marker);
})
;}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
通过添加和删除代码,我发现第二部分中的脚本导致了问题。但是,我不知道如何更正此问题,并使页面以漂亮、整洁的字体显示,就像其他页面一样。
在您的页面中,您使用了 Webfont "Roboto",它将从以下位置加载:
http://fonts.googleapis.com/css?family=Roboto:300&subset=latin-ext
地图-API 也加载此字体,但设置不同:
https://fonts.googleapis.com/css?family=Roboto:300,400,500,700
...这将扩展从第一个样式表加载的 @font-face
。
对于独特的布局,您有以下选项:
- 在您的页面中使用其他字体
- 使用与地图相同的样式表-API 加载字体
- 删除地图加载的样式表-API:
//add this after the creation of the google.maps.Map
google.maps.event.addListenerOnce(map,'idle',function(){
var font=document.querySelector('link[href$="//fonts.googleapis.com/css?family=Roboto:300,400,500,700"]');
if(font){
font.parentNode.removeChild(font);
}
});
演示:
function initialize() {
return new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 0,
center: new google.maps.LatLng(0, 0)
});
}
google.maps.event.addDomListener(window, 'load', function() {
var btn = document.getElementById('foo');
btn.innerHTML = 'click here to load the map<br/>(observe the changes in the appereance of the text above )';
google.maps.event.addDomListenerOnce(btn, 'click', function() {
btn.innerHTML = 'loading map, please wait';
var map = initialize();
google.maps.event.addListenerOnce(map, 'idle', function() {
btn.innerHTML = 'you may have noticed some changes in the appereance of the text above.<br/>' +
'click again to remove the stylesheet loaded by the maps-API ';
google.maps.event.addDomListenerOnce(btn, 'click', function() {
var font = document.querySelector('link[href$="//fonts.googleapis.com/css?family=Roboto:300,400,500,700"]');
if (font) {
font.parentNode.removeChild(font);
btn.innerHTML = 'the stylesheet has been removed,<br/> the text above should be displayed correctly again';
} else {
btn.innerHTML = 'the stylesheet can\'t be localized';
}
});
});
});
});
body {
text-align: center;
}
h1 {
font-family: Roboto;
}
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300&subset=latin-ext" />
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<h1>test-text</h1>
<button type="button" id="foo"></button>
<div id="map_canvas"></div>
我正在创建一个联系页面,我希望在该页面上有一张指向我所在位置的地图。
问题是,一旦我嵌入地图,页面上的字体就会改变(通过浏览该域的其他页面自行查看)。嵌入有两个部分:
头部标签之间的代码
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
BODY 标签之间的代码
<div style="overflow:hidden;height:400px;width:450px;">
<div id="gmap_canvas" style="height:400px;width:450px;"></div>
</div>
<script type="text/javascript">
function init_map(){
var myOptions = {
zoom:11,
center:new google.maps.LatLng(46.0475235,20.096552599999995),
mapTypeId: google.maps.MapTypeId.TERRAIN};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(46.0475235, 20.096552599999995)});
infowindow = new google.maps.InfoWindow({
content:"<b>MEGA d.o.o.</b><br/>Nenada Valceva 39<br/>23330 Novi Knezevac" });
google.maps.event.addListener(marker, "click",
function(){infowindow.open(map,marker);
})
;}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
通过添加和删除代码,我发现第二部分中的脚本导致了问题。但是,我不知道如何更正此问题,并使页面以漂亮、整洁的字体显示,就像其他页面一样。
在您的页面中,您使用了 Webfont "Roboto",它将从以下位置加载:
http://fonts.googleapis.com/css?family=Roboto:300&subset=latin-ext
地图-API 也加载此字体,但设置不同:
https://fonts.googleapis.com/css?family=Roboto:300,400,500,700
...这将扩展从第一个样式表加载的 @font-face
。
对于独特的布局,您有以下选项:
- 在您的页面中使用其他字体
- 使用与地图相同的样式表-API 加载字体
- 删除地图加载的样式表-API:
//add this after the creation of the google.maps.Map google.maps.event.addListenerOnce(map,'idle',function(){ var font=document.querySelector('link[href$="//fonts.googleapis.com/css?family=Roboto:300,400,500,700"]'); if(font){ font.parentNode.removeChild(font); } });
演示:
function initialize() {
return new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 0,
center: new google.maps.LatLng(0, 0)
});
}
google.maps.event.addDomListener(window, 'load', function() {
var btn = document.getElementById('foo');
btn.innerHTML = 'click here to load the map<br/>(observe the changes in the appereance of the text above )';
google.maps.event.addDomListenerOnce(btn, 'click', function() {
btn.innerHTML = 'loading map, please wait';
var map = initialize();
google.maps.event.addListenerOnce(map, 'idle', function() {
btn.innerHTML = 'you may have noticed some changes in the appereance of the text above.<br/>' +
'click again to remove the stylesheet loaded by the maps-API ';
google.maps.event.addDomListenerOnce(btn, 'click', function() {
var font = document.querySelector('link[href$="//fonts.googleapis.com/css?family=Roboto:300,400,500,700"]');
if (font) {
font.parentNode.removeChild(font);
btn.innerHTML = 'the stylesheet has been removed,<br/> the text above should be displayed correctly again';
} else {
btn.innerHTML = 'the stylesheet can\'t be localized';
}
});
});
});
});
body {
text-align: center;
}
h1 {
font-family: Roboto;
}
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300&subset=latin-ext" />
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<h1>test-text</h1>
<button type="button" id="foo"></button>
<div id="map_canvas"></div>