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

Posted

技术标签:

【中文标题】嵌入谷歌地图会改变网站字体【英文标题】:Embedding Google Map changes website font 【发布时间】:2015-10-23 18:18:02 【问题描述】:

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

问题是,一旦我嵌入了地图,页面上的字体就会发生变化(通过浏览该域的其他页面自己查看)。嵌入有两个部分: 头部标签之间的代码

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   <style>#gmap_canvas imgmax-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>

通过添加和删除代码,我发现第二部分中的脚本导致了问题。但是,我不知道如何纠正这个问题,并让页面以漂亮、整洁的字体显示,就像其他人一样。

【问题讨论】:

【参考方案1】:

在您的页面中,您使用 Webfont "Roboto",它将从以下位置加载:

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

maps-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"]');
  如果(字体)
    font.parentNode.removeChild(字体);
  
);

演示:

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>

【讨论】:

似乎没有解决问题......我觉得我做错了什么......你能告诉我这些代码行的确切位置,关于我自己的代码...... . 抱歉,JS 不是我的强项。地图是真正的速度杀手,不是吗? 直接放在map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions); 之后 注意:我已经修改了代码,使用更新后的代码(不管加载地图API 的协议如何)。与速度有关:速度杀手不是地图,您的页面中有 2 张图片(mega.co.rs/WebStore/inventory_images/262.jpg,mega.co.rs/WebStore/inventory_images/4.jpg),总文件大小为 7MB...减小文件大小。 我复制了代码,有时在加载时会导致字体更改 2 次。

以上是关于嵌入谷歌地图会改变网站字体的主要内容,如果未能解决你的问题,请参考以下文章

如何在您的网站中嵌入样式化的谷歌地图

嵌入谷歌地图的iFrame上的CSS边框半径,不起作用

如何在 Reactjs 中的谷歌地图上嵌入一个确切的位置

如何从新的谷歌地图嵌入中删除框?

如何禁用滚动缩放。谷歌地图嵌入 API [重复]

更新谷歌地图会从表单元素中窃取焦点