如何解决agm-map更改整个页面的字体
当我的页面将所有字体加粗时,im使用带有角度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*/
}
before loading the map and after loading the 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。