AGM:Angular Google Maps Import Injectable

时间:2018-03-21 22:17:16

标签: angular

我正在使用AGM

我想在@Component

中使用MarkerManager
import { Component } from '@angular/core';
import { MarkerManager } from '@agm/core';

@Component({
  selector: 'ngx-gmaps',
  providers: [MarkerManager],
  styleUrls: ['./gmaps.component.scss'],
  template: `
    <nb-card>
      <nb-card-header>Google Maps</nb-card-header>
      <nb-card-body>
        <agm-map
          [latitude]="lat"
          [longitude]="lng"
          [scrollwheel]="true"
          [rotateControl]="true"
          [mapTypeControl]="true"
          [zoom]=18
          (mapClick)="onChosenLocation($event)"
          (mapReady)="onMapReady($event)">

          <agm-marker
            [latitude]="lat"
            [longitude]="lng">
            [markerDraggable]="true"
            *ngIf="locationChosen">

            <agm-info-window
              [isOpen]="true"
              [maxWidth]="150" #infoWindow>
              <strong>JHU/APL</strong>
            </agm-info-window>

          </agm-marker>

        </agm-map>
      </nb-card-body>
    </nb-card>
  `,
})
export class GmapsComponent {

  lat = 39.163100;
  lng = -76.899428;
  locationChosen=true;

  constructor(private markerManager: MarkerManager){

  }

  onMapReady(event){
    console.log('Map is ready');
  }

  onChosenLocation(event) {
   this.lat = event.coords.lat;
   this.lng = event.coords.lng;
   this.locationChosen = true;
 }

}

我收到以下错误:

StaticInjectorError(AppModule)[InfoWindowManager ->     GoogleMapsAPIWrapper]: 
  StaticInjectorError(Platform: core)[InfoWindowManager ->     GoogleMapsAPIWrapper]: 
    NullInjectorError: No provider for GoogleMapsAPIWrapper!

如何导入MarkerManager?

2 个答案:

答案 0 :(得分:0)

我明白了:

import { MarkerManager } from '@agm/core';
import {GoogleMapsAPIWrapper} from '@agm/core';

答案 1 :(得分:0)

在您的主模块中, 添加

@NgModule({
    providers: [
        ...
        GoogleMapsAPIWrapper,
    ]
})

希望这会有所帮助