共计 1669 个字符，预计需要花费 5 分钟才能阅读完成。
先上效果图：
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);
}
