angular 2 谷歌地图没有出现答案

【问题标题】：angular 2 google maps doesn't appearangular 2 谷歌地图没有出现
【发布时间】：2017-05-02 14:01:05
【问题描述】：

现在我尝试在 Angular 2 中使用谷歌地图，但我一无所获，没有错误，但地图没有出现，所以任何人都可以告诉我我做错了什么？

感谢帮助

index.html

   <!DOCTYPE html>
    <html>
       <head>
         <title>ng Events</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="node_modules/ng2f-bootstrap/dist/bootstrap.min.css">
        <link rel="stylesheet" href="styles.css">

        <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>


       <script src="node_modules/jquery/dist/jquery.min.js"></script>
       <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
       <script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
    System.import('app').catch(function(err){console.error(err);});
</script>
    </head>

    <body class="container">
      <app-root></app-root>
    </body>
  </html>

main.ts

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

   import {AppModule} from './app.module'

   platformBrowserDynamic().bootstrapModule(AppModule)

app.module.ts

    import { NgModule, ApplicationRef, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
    import { BrowserModule } from '@angular/platform-browser'
    //import { EventAppComponent } from './events-app.component'

    import { AgmCoreModule} from '@agm/core'
    import { AppComponent } from './app.component'



   @NgModule({
imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyADbB0V0Esy-BQ-Oxk9vkr_ifJqcxK3LEo'
    })
  ],
schemas:  [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [],
declarations: [AppComponent],
bootstrap: [AppComponent]
     })
     export class AppModule
     {

     }

app.component.ts

      import { Component } from '@angular/core';

      @Component({
        selector: 'app-root',
        styles: [`
          .sebm-google-map-container {
            height: 300px;
          }
`      ],
      template: `
           <sebm-google-map [latitude]="lat" [longitude]="lng"></sebm-google-map>
`
     })
    export class AppComponent {

       // initial center position for the map
       lat: number = 51.678418
       lng: number = 7.809007
    }

【问题讨论】：

我没有看到你已经导入了sebm-google-map？ angular-maps.com/docs/api/latest/ts/core/…

标签： angular angular-google-maps

【解决方案1】：

根据document 所说，您需要添加 SebmGoogleMap 指令和模块才能在 ng2 中使用。以下是方法并进行相应的更改。

import {SebmGoogleMap} from 'angular2-google-maps/core';

@Component({
 selector: 'my-map-cmp',
 directives: [SebmGoogleMap],
 styles: [`
   .sebm-google-map-container {
     height: 300px;
   }
`],

【讨论】：