Angular Карты Google не отображаются

Я пытаюсь заставить AGM работать в моем приложении Ionic 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.


typescript ionic-framework angular ionic2
person Benedict Lewis    schedule 27.04.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно импортировать директиву:

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>
 `
})
person SrAxi    schedule 27.04.2017

arrow_upward
0
arrow_downward

SrAxi указал мне правильное направление, однако в текущей версии Angular (4.x) я считаю, что компоненты не могут иметь директив.

Я обнаружил, что angular2-google-maps совсем недавно переименовали в @agm. Если вы импортируете AGM с помощью @agm (как в туториале на Github), имена селекторов изменились, но документация не обновилась.

Это единственная документация по новым селекторам: https://github.com/SebastianM/angular-google-maps/blob/master/CHANGELOG.md#100-beta0---green-zebra-2017-04- 09

В моем примере мне нужно было обновить map.html, чтобы:

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
person Benedict Lewis    schedule 27.04.2017