在Ionic 或者 Angular 中用 Google Map API 實現自動補全地址(autocomplete)

先上效果圖：

Github: https://github.com/luchenwei9...

實現步驟:

環境安裝就不提了，無非就是用npm全局安裝Ionic 或者 Angular。本文是以Ionic爲例。

1. 安裝type/googlemaps

npm install type/googlemaps -save

2. 把Google API Key 聲明在你的index.html裏

申請地址 https://developers.google.com/maps/documentation/javascript/get-api-key

在key處的值替換成你的的key，而後將這段代碼放到index.html裏

<script src="https://maps.googleapis.com/maps/api/js?key=your-google-key&libraries=places"></script>

3. 編寫代碼

我這裏直接用home了

4. 運行查看效果

幾個注意事項

1. 若是你是Angular6或者以上的版本,請必定要在相關ts文件裏的第一行聲明這個

/// <reference types="@types/googlemaps" />

若是不是,請聲明這一句代碼

import {} from "googlemaps";

具體討論請看這裏:
https://stackoverflow.com/questions/51084724/types-googlemaps-index-d-ts-is-not-a-module

---

2. 我這裏用的是<ion-input></ion-input>標籤，而這個API支持的是原生的HTML<input />標籤。若是不是原生的話，會報這個錯誤:

因此個人在home.page.ts文件裏的getPlaceAutocomplete()獲取DOM的代碼是這樣寫的

let ele = document.getElementById('addresstext').getElementsByTagName('input')[0];

若是是原生<input />標籤，還能夠這樣寫:

(詳細代碼請參考github地址)

html文件

<input #addresstext style="border:1px solid #111;width: 100%" />

ts文件

/// <reference types="@types/googlemaps" />
import { Component, ViewChild, OnInit, AfterViewInit , NgZone } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, AfterViewInit {
  @ViewChild('addresstext') addresstext: any;
  ...
  private getPlaceAutocomplete() {
    let ele = this.addresstext.nativeElement;
    const autocomplete = new google.maps.places.Autocomplete(ele,
    { 
      ... 
    }
}

順便放一下二者的效果圖，讓你們看一下效果圖，能夠發現區別是，若是是原生的HTML標籤，google會自動幫你添加placeholder :）

---

3*.雖然是在ngAfterViewInit()裏調用的googleMap初始化函數，理論上此時視圖已經初始化好了，因此DOM應該渲染出來了。但實際項目中，仍是會以下所示的錯誤

猜測緣由，應該一開始google找不到相關的DOM的節點，因此我在這裏加了一個setTimeout()

ngAfterViewInit() {
  setTimeout(() => {
    this.getPlaceAutocomplete();
  },1000);
}