angular2-google-maps 自动完成功能不起作用

Question

我正在尝试使用 angular2-google-maps 为我的项目添加自动完成功能。我在我的 AppModule 中添加了 AgmCoreModule.forRoot（带有库：'places'），然后在我的组件中添加了自动完成代码。我仍然收到“无法读取未定义的属性‘自动完成’”错误。我尝试检查 global var google 的值，而 google.map 不包含“places”字段。我对 angular2 比较陌生，所以需要一些帮助来理解我所缺少的。我的代码是 在 AppModule
从 'angular2-google-maps/core' 导入 { AgmCoreModule }；

@NgModule({
    bootstrap: [ App ],
    declarations: [
      App,
      ErrorComponent,
    ],
    imports: [ // import Angular's modules
    AgmCoreModule.forRoot({
            apiKey: '[API_KEY_REDACTED]',
            libraries: ["places"]
        }),
      BrowserModule,

        FormsModule,
      ReactiveFormsModule,
      HttpModule,
      TranslateModule.forRoot(),
      RouterModule.forRoot(ROUTES, { useHash: true })
    ],
    providers: [ // expose our Services and Providers into Angular's dependency injection
      ENV_PROVIDERS,
      APP_PROVIDERS,
    ]
})
export class AppModule {

在 AppComponent 中：

import {MapsAPILoader} from 'angular2-google-maps/core';
import { NgZone          }   from    '@angular/core';
declare var google: any;
export class EventInfoTab {
    @ViewChild('gmap') gmap:any;
 constructor(
        private _loader: MapsAPILoader,
        private zone            :   NgZone,
 )
 ngAfterViewInit(): void {
        this._loader.load().then(() => {
        let address = document.getElementById("location");
        console.log("google", google);
            let autocomplete = new google.maps.places.Autocomplete(address, {});
            console.log ("autocomplete",autocomplete);
            google.maps.event.addListener(autocomplete, 'place_changed', () => {
       this.zone.run(() => { 
          console.log ("autocomplete place_changed",autocomplete);
          var place = autocomplete.getPlace();
          this.lat = place.geometry.location.lat();
          this.lng = place.geometry.location.lng();
          //alert(JSON.stringify(place));
          this.markers[0] ={
                           lat: this.lat,
                           lng: this.lng,
                           label: 'x',
                           draggable: false
                           };
              });                           

              });
            });....

Answer 1

所以，我能够让它工作。在从主要组件路由之后，我试图将具有自动完成功能的地图包含在功能组件中。我删除了代码

'AgmCoreModule.forRoot({
            apiKey: '[API_KEY_REDACTED]',
            libraries: ["places"]
        }),'

来自 app module.ts 并将其添加到功能的 module.ts 导入中并且它起作用了。

Answer 2

自从 Pooja 开始工作，我已经为她完成了 Angular2 + angular2-google-maps + Autocomplete 的工作示例，我想我会在此处添加代码以帮助 未来的开发人员寻找类似的东西。

import {
  Component,
  NgModule,
  OnInit,
  NgZone
} from '@angular/core';

import {
  BrowserModule
} from '@angular/platform-browser';

import {
  AgmCoreModule,
  MapsAPILoader
} from 'angular2-google-maps/core';

declare var google: any;

@Component({
  selector: 'my-app',
  styles: [`
    .sebm-google-map-container {
       height: 300px;
     }
  `],
  template: `
    <sebm-google-map 
      [latitude]="lat"
      [longitude]="lng"
      [zoom]="zoom"
      [disableDefaultUI]="false"
      [zoomControl]="true">

      <sebm-google-map-marker 
          *ngFor="let m of markers; let i = index"
          (markerClick)="clickedMarker(m.label, i)"
          [latitude]="m.lat"
          [longitude]="m.lng"
          [label]="m.label"
          [markerDraggable]="m.draggable"
          (dragEnd)="markerDragEnd(m, $event)">

        <sebm-google-map-info-window>
          <strong>InfoWindow content</strong>
        </sebm-google-map-info-window>

      </sebm-google-map-marker>

    </sebm-google-map>
    <input type="text" id="autocompleteInput">
`})
export class App implements OnInit {

  constructor(
    private _loader: MapsAPILoader,
    private _zone: NgZone) {
  }

  ngOnInit(): void {
    this.autocomplete();
  }

  autocomplete() {
    this._loader.load().then(() => {
        var autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocompleteInput"), {});
        google.maps.event.addListener(autocomplete, 'place_changed', () => {
            this._zone.run(() => {
              var place = autocomplete.getPlace();

              this.markers.push({
                lat: place.geometry.location.lat(),
                  lng: place.geometry.location.lng(),
                  label: place.name,
              });

              this.lat = place.geometry.location.lat();
              this.lng = place.geometry.location.lng();

              console.log(place);
            });
        });
    });
  }

  // google maps zoom level
  zoom: number = 8;

  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng
    });
  }

  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }

  markers: marker[] = [];
}
// just an interface for type safety.
interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
}

@NgModule({
  imports: [ 
    BrowserModule, 
    AgmCoreModule.forRoot({
        libraries: ['places']
    }) 
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Working Plnkr

2017 年 4 月 17 日更新

在版本 1.0.0-beta.0 - green-zebra 中，AGM 团队发布了一项重大更改，其组件的命名将需要更新您的模板文件，如下所示：

<agm-map
    [latitude]="lat"
    [longitude]="lng"
    [zoom]="zoom"
    [disableDefaultUI]="false"
    [zoomControl]="true">

    <agm-marker
        *ngFor="let m of markers; let i = index"
        (markerClick)="clickedMarker(m.label, i)"
        [latitude]="m.lat"
        [longitude]="m.lng"
        [label]="m.label"
        [markerDraggable]="m.draggable"
        (dragEnd)="markerDragEnd(m, $event)">

    <agm-info-window>
        <strong>InfoWindow content</strong>
    </agm-info-window>

    </agm-marker>

</agm-map>
<input type="text" id="autocompleteInput">

上述plnkr/code的更新版本可以在以下GitHub repo找到。

Answer 3

我也有同样的问题，但原因不同。我在模态（弹出）内使用地图

let address = document.getElementById("location");
let autocomplete = new google.maps.places.Autocomplete(address, {});

在我的例子中，上面的代码在 ngOnInit 中运行，问题是文本输入元素仍未创建。 您需要将自动完成代码放在每次创建元素时运行的函数中。我试过 ngAfterViewInit，但没有用