angular2-google-maps自动完成功能不起作用 [英] angular2-google-maps autocomplete not working

问题描述

我正在尝试使用angular2-google-maps将自动完成功能添加到我的项目中.我在AppModule中添加了AgmCoreModule.forRoot(带有库:"places")，然后在组件中添加了自动完成代码.仍然出现无法读取未定义的属性'自动完成'"错误.我尝试检查全局var google的值，并且google.map不包含地方"字段.我对angular2相对较新，因此需要一些帮助来了解我所缺少的内容.我的代码是 在AppModule中
从"angular2-google-maps/core"导入{AgmCoreModule};

I am trying to add autocomplete to my project with angular2-google-maps. I add AgmCoreModule.forRoot (with libraries: 'places') in my AppModule and then added the autocomplete code in my component. Still I get "Cannot read property 'Autocomplete' of undefined" error. I tried checking the value of global var google, and google.map does not contain 'places' field. I am relatively new to angular2, so would need some help to understand what I am missing. My code is in AppModule
import { AgmCoreModule } from 'angular2-google-maps/core';

@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中:

In 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
                           };
              });                           

              });
            });....

推荐答案

因此，我能够使其工作.从主要组件路由后，我试图将具有自动完成功能的地图包括在功能组件中.我删除了代码

So, I was able to make it work. I was trying to include the map with autocomplete in a feature component, after routing from the main component. I removed the code

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

从app module.ts导入，并将其添加到功能的module.ts导入中，并且可以正常工作.

from app module.ts and added it in the feature's module.ts imports and it worked.

这篇关于angular2-google-maps自动完成功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！