Angular 谷歌地图 (AGM) 不可见答案

【问题标题】：Angular Google Maps (AGM) not visibleAngular 谷歌地图 (AGM) 不可见
【发布时间】：2017-12-20 11:26:28
【问题描述】：

我正在尝试将地图添加到我的 Angular 项目中。使用 AGM 来实现这一目标 (https://github.com/SebastianM/angular-google-maps)。不过我的地图没有显示...

app.module.ts:

@NgModule(<NgModule>{
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    OrderModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    FormsModule,
    MatTabsModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    NoopAnimationsModule,
    MatPaginatorModule,
    MatSortModule,
    MatButtonModule,
    MatDialogModule,
    MatCardModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    AgmCoreModule.forRoot({
      apiKey: <APIKEY>
    })
  ],

  exports: [FilterPipe],
  providers: [],
  bootstrap: [AppComponent]
})

app.component.html：

<div>
  <agm-map [latitude]="51.678418" [longitude]="7.809007" [zoom]="zoom" [disableDefaultUI]="false"
           [zoomControl]="false">
    <agm-marker [latitude]="51.678418" [longitude]="7.809007"></agm-marker>
  </agm-map>
</div>

我在 mat-tab 组件（角材料）中展示这个

提前致谢！

【问题讨论】：

标签： angular google-maps angular-material

【解决方案1】：

你应该给地图一个高度，所以在你的组件样式中添加这个：

agm-map{
    height: 300px
}

【讨论】：

【解决方案2】：

这对我有用：

在 HTML 中

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="styles" [mapTypeId]='mapType' #AgmMap></agm-map>

在 TS 中

ngAfterViewInit(): void {
   setTimeout(() => {
     console.log('Resizing');
     this.agmMap.triggerResize();
   }, 100);
 }

在 CSS 中

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

【讨论】：

只是在这里指出，triggerResize 的正确方法是在 this.pickMap.triggerResize(); 中调用它。生命周期挂钩。

【解决方案3】：

最实用的方法是这样的：

<div class="map">
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false" [scrollwheel]="null" [zoomControl]="true" [styles]="styles">/agm-map>
</div>

.map {
    width: 100%;
    min-height: 50vh;
    height: 0;

    agm-map {
        height: 100%;
        width: 100%;
    }
}

【讨论】：

【解决方案4】：

如果使用 agm（角度谷歌地图），您应该在属性中提供适当的纬度和经度。使用正确的属性绑定语法并在样式中提供高度。

【讨论】：

【解决方案5】：

如果您使用的是共享模块，并且您声明组件的模块（您想要集成 agm 的位置）使用此共享模块，您只需在此共享模块中添加 AgmCoreModule

【讨论】：