angular - agm-map 更改整个页面的字体

问题描述

我使用 angular 9 的 agm-map，当我的页面加载它时，所有字体都加粗。我尝试在没有 agm-map 的情况下测试我的前端，一切正常，但是当我添加该特定行时，它会加粗这里的所有内容都是我的代码

<mat-card class="example-card">
<agm-map
            class="temp"
            [latitude]="lat"
            [longitude]="lng"
            [zoom]="zoom"
          >
            <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
          </agm-map>
        </mat-card>

我的 CSS

agm-map {
  height: 450px !important;
  width: 100%; /* This is really important*/
}

在加载地图之前和加载地图之后任何建议或任何人都可以指出我在这里做错了什么非常感谢

标签： angularangular8angular9agm-map

一种解决方案是通过指令阻止加载 Google 字体 //fonts.googleapis.com/css?family=Roboto

文件 google-fonts-loading-disable.directive.ts

import { Directive } from '@angular/core';
    
@Directive({
  selector: '[appGoogleFontsLoadingDisable]'
})
export class GoogleFontsLoadingDisableDirective {
  constructor() {
    const head = document.getElementsByTagName('head')[0] as any;
    const insertBefore = head.insertBefore;
    head.insertBefore = function (newElement: any, referenceElement: any) {
      if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {
        return;
      }
      insertBefore.call(head, newElement, referenceElement);
    };
  }
}

添加在 app.modules.ts 中注册的指令

@NgModule({
declarations: [
    AppComponent,
    GoogleFontsLoadingDisableDirective,

并将指令与 Google 地图一起使用

<agm-map appGoogleFontsLoadingDisable [latitude]="event.geo.lat" [longitude]="event.geo.lgtd" [zoom]="14" style="height: 60vh;">
    <agm-marker [latitude]="event.geo.lat" [longitude]="event.geo.lgtd" [label]="event.eventCd" [title]="event.eventCd+' '+event.eventCreatedDtm"></agm-marker>
</agm-map>

angular - agm-map 更改整个页面的字体

问题描述

解决方案

推荐阅读