angular - 加载谷歌地图会破坏 css/样式表

Question

我有一个使用谷歌地图的简单应用程序。特别是我正在使用AgmCoreModule和places库：

AgmCoreModule.forRoot({
  apiKey: '*********************',
  libraries: ['places']
}),

除了导航到正在加载模块的页面之外，一切都工作正常，我注意到我的样式表搞砸了。像

<b>My text</b>

不要再看起来一样了。

只需导航到页面就会改变一切

对此：

看起来字体也发生了变化。

知道如何避免这种行为吗？

---

更新：

我注意到，当我转到加载谷歌地图的页面时，有一个对https://fonts.googleapis.com/css?family=Roboto:300,400,500,700的 GET 请求。我认为这是问题的根源。

有没有办法阻止谷歌地图这样做？

标签： angulargoogle-maps-api-3

Answer 1

这似乎是一个已知问题（https://github.com/SebastianM/angular-google-maps/issues/1466）。

有一种解决方法可以防止谷歌地图下载额外的字体：

<script>
    var head = document.getElementsByTagName('head')[0];

    // Save the original method
    var insertBefore = head.insertBefore;

    // Replace it!
    head.insertBefore = function (newElement, referenceElement) {

        if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {

            console.info('Prevented Roboto from loading!');
            return;
        }

        insertBefore.call(head, newElement, referenceElement);
    };
</script>