ngx- gp- 自动完成

发音: https://ngx-gp-autocomplete. angularmagic.com 互联网档案馆的存檔,存档日期2013-12-02

这个模块是Google Places Autocomplete js库的包装器. 从此工程复制了初始代码基础 gx-google-place-自动完成,该模块应用了一些修正和改进. 喜欢 @ types/ google. maps 财务报告和审定财务报表 @googlemaps/js-api-loader (英语)

安装

无

npm install @angular-magic/ngx-gp-autocomplete

npm install @googlemaps/js-api-loader

npm install --save @types/google.maps

一体化

• 将 NgxGpAutocomplete 模块导入您的应用程序模块

import { NgxGpAutocompleteModule } from "@angular-magic/ngx-gp-autocomplete";

@NgModule({
  imports: [
    NgxGpAutocompleteModule,
    BrowserModule,
    FormsModule,
    //...
  ],
  providers: [
    {
      provide: Loader,
      useValue: new Loader({
        apiKey: 'YOUR_API_KEY',
        libraries: ['places']
      })
    },
    //...
  ],
  //...
})

• 将您的 API KEY 替换为 google 位置 api 键 。 参考文件 - https://developers.google.com/places/web-service/get-api-key 互联网档案馆的存檔,存档日期2013-12-02

• 将 ngx- gp- 自动完成指令添加到您的输入字段( 选项是一个可选参数)

<input #placesRef="ngx-places" ngx-gp-autocomplete [options]='options' (onAddressChange)="handleAddressChange($event)"/>

• 此外,您还可以在组件中引用指令

export class Component {
  @ViewChild('ngxPlaces') placesRef: NgxGpAutocompleteDirective;

  public handleAddressChange(place: google.maps.places.PlaceResult) {
    // Do some stuff
  }
}

GitHub 图像

请随意宣布问题或贡献: https://github.com/angular-magic/ngx-gp-autocomprofile (中文(简体) )