Angular 2 使用谷歌地图 API。呈现 html 时 MAP 不可见答案

【问题标题】：Angular 2 using GoogleMap Api. The MAP not visible when the html is renderedAngular 2 使用谷歌地图 API。呈现 html 时 MAP 不可见
【发布时间】：2017-04-24 15:39:51
【问题描述】：

我正在创建与 google map api 交互的 angular 2 应用程序。文档确实说，如果未应用样式，则屏幕上将看不到谷歌地图。即使我明确地将 css 类分配给 html 元素，也没有什么区别。有人可以帮忙吗

根据此链接上的文档

https://angular-maps.com/docs/getting-started.html

.sebm-google-map-container {
  height: 300px;
}

我已经在我的组件中声明了它，但是我只能看到标题而不是地图。我也没有在开发人员工具上看到任何错误。请在下面查看我的代码

ShipGeoFinder 组件

@Component({
    selector: 'ship-root',
    templateUrl: '/app/ShipGeoFinder/ShipGeoFinder.html',
     styles: [`
    .sebm-google-map-container {
       height: 400px;
        width: 400px;
     }
  `],
})
export class ShipGeoFinderComponent {
    title: string = 'My first angular2-google-maps project';
    lat: number = 51.678418;
    lng: number = 7.809007;
}

ShipGeoFinder.html

<h1>{{ title }}</h1>

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->

<sebm-google-map [latitude]="lat" [longitude]="lng">
    <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

【问题讨论】：

标签： angular google-maps-api-3 google-maps-markers

【解决方案1】：

确保您在 app.module.ts 中导入了 Angular 地图模块

    //app.module.ts        
    import { AgmCoreModule } from 'angular2-google-maps/core';

    imports: [
     AgmCoreModule.forRoot({
      apiKey: 'YOUR_KEY_FROM_GOOGLE_CONSOLE' //Ensure Google Maps Javascript API is enabled
     })
    ]

如果您还没有这样做，那应该可以解决问题。

【讨论】：