Question

我正在创建与谷歌地图API交互的角度2应用程序。文档确实说如果未应用样式，则屏幕上将不会显示谷歌地图。即使我明确地将css类分配给html元素，它也没有区别。有人可以提供帮助

根据此链接上的文档

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

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

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

ShipGeoFinderComponent

@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>

Answer 1

确保您在app.module.ts

中导入了Angular Maps模块

    //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
     })
    ]

如果你还没有这样做，那应该可以做到。

Angular 2使用GoogleMap Api。渲染html时，MAP不可见

1 个答案: