Angular Google Maps无法渲染

Question

我正在尝试让AGM在我的离子2应用程序中工作。

app.module.ts

...
import { AgmCoreModule } from '@agm/core';
import { DirectionsMapDirective } from '../components/directions-map';
@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AgmCoreModule.forRoot({
      apiKey: '<api key>',
      libraries: ['places']
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    DirectionsMapDirective,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

map.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
  selector: 'page-requests',
  templateUrl: 'requests.html'
})
export class MapPage {
  lat: number = 51.678418;
  lng: number = 7.809007;
  constructor(public navCtrl: NavController) {}
}

map.html

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

运行时，我会收到以下错误：

模板解析错误：无法绑定到"纬度"，因为它不是已知的 " sebm-google-map"的属性。

Answer 1

您需要导入指令：

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

并将它们添加到您的@Component声明中：

@Component({
 selector: 'my-map-cmp',
 directives: [SebmGoogleMap, SebmGoogleMapMarker],
 template: `
   <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
     <sebm-google-map-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
     </sebm-google-map-marker>
   </sebm-google-map>
 `
})

Answer 2

sraxi向我指出了正确的方向，但是在当前的角版(4.x(中，组件不能具有我相信的指令。

我发现的是angular2-google-maps最近才重命名为@agm。如果您使用@agm导入AGM(如GitHub上的教程中所述(，则选择器的名称已更改，但文档尚未更新。

这是新选择器的唯一文档：https：//github.com/sebastianm/angular-google-maps/blob/blob/master/changelog.md#100-beta0-beta0-beta0----green-green-zebra-2017-2017-04-04--09

在我的示例中，我需要更新map.html到：

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