嵌入谷歌地图会改变网站字体。

Question

嵌入谷歌地图会改变网站字体。

4

我正在创建一个联系页面，在该页面上，我希望有一张指向我的位置的地图。

问题是，一旦我嵌入地图后，页面上的字体就会发生变化（通过导航到此域的其他页面可以自行查看）。嵌入分为两个部分：

在HEAD标签之间的代码

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

标签之间的代码

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

通过添加和删除代码，我发现第二部分的脚本引起了问题。然而，我不知道如何纠正这个问题，并使页面显示为漂亮、整洁的字体，就像其他页面一样。

- Knight1805

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dr.Molle · Accepted Answer

您的页面使用了Web字体"Roboto"，该字体将从以下地址加载：

http://fonts.googleapis.com/css?family=Roboto:300&amp;subset=latin-ext

地图API也加载此字体，但设置不同：

https://fonts.googleapis.com/css?family=Roboto:300,400,500,700

这将扩展从第一个样式表加载的@font-face。

对于独特的布局，您有以下选项：

在您的页面中使用另一种字体
使用与maps-API相同的样式表来加载字体

删除由maps-API加载的样式表：

//在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&amp;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>