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

Question

我使用的agm-map与angular 9，当我的页面加载它加粗所有字体。我试着在没有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*/
}

before loading the map and after loading the map任何建议或任何人能指出我在这里做错了什么吗?非常感谢

Answer 1

一种解决方案是通过指令阻止加载Google font //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>