如何将Google位置自动完成功能添加到Angular应用程序中？

此处的任务是将自动完成Google位置信息添加到您的Angular应用程序中。当用户在文本字段中输入某个位置的文本时，他/她将获得位置建议，并可以自动完成该位置。为了实现目标，我们将使用ngx-google-places-autocomplete角度包。

什么是ngx-google-places-autocomplete ?

此模块是Google地方信息自动填充js库的包装。它使我们能够将位置自动完成功能集成到我们的项目中。

方法

• 首先将ngx-google-places-autocomplete安装到您的angular项目>

对于npm：

npm install ngx-google-places-autocomplete

对于纱线：

yarn add ngx-google-places-autocomplete

• 将库添加到项目应用程序src中的index.html中。

• 生成一个API密钥，并将该API密钥放置在上面的脚本标记中，以代替<您的API密钥>。
• 要生成API密钥，请执行以下步骤：
  • 转到https://developers.google.com/places/web-service/get-api-key并按照所有步骤创建API密钥。
  • 为您的API密钥启用Places API。
  • 确保已启用您的API，要启用您的API，请遵循此链接https://support.google.com/googleapi/answer/6158841?hl=zh_CN中的步骤。
• 在app.module.ts中进行必要的GooglePlaceModule导入。

import { GooglePlaceModule } from "ngx-google-places-autocomplete";

@NgModule({

  imports: [
    GooglePlaceModule
  ],

• 在appcomponent的HTML文件中。定义输入字段的代码，在该输入字段中，用户定义的函数AddressChange()将由(onAddressChange)调用，并传递$ event，而选项将处理在component.ts文件的country数组中设置的国家/地区。
• 在component.ts文件中，用户定义的函数从$ event地址获取formatted_address，然后将其用于通过插值绑定在输入字段中设置地址。

注意：在国家/地区数组中，为澳大利亚添加了“ AU”，您可以根据自己的需要添加其他任何国家。

执行：

app.module.ts

Javascript

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import '@angular/compiler';
//import for GooglePlaceModule
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
  
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    //Adding to imports
    GooglePlaceModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

的HTML

    
GeeksforGeeks
    
Google Places Autocomplete

{{ formattedaddress }}

app.component.ts

Java脚本

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'rou';
  //Local Variable defined
  formattedaddress=" ";
  options={
    componentRestrictions:{
      country:["AU"]
    }
  }
  public AddressChange(address: any) {
  //setting address from API to local variable
   this.formattedaddress=address.formatted_address
}
}

输出：

使用ng serve运行开发服务器，并在输入字段中写入一些位置以查看自动完成位置。