ReferenceError:页面刷新后未定义谷歌

Question

我在我的网站上使用Google Places API进行自动推荐，in First go工作正常，但当我刷新特定角度组件的页面时，它显示错误，即

ReferenceError: google is not defined

我已经搜索了很多网站，但没有一个解决方案有效。我尝试在index.html的脚本标签中添加async和defer，但不起的作用

寄存器组件.ts

declare var google: any;
export class RegisterComponent implements AfterViewInit {
constructor() { }
ngAfterViewInit() {
const input = <HTMLInputElement>document.getElementById('googlePlaces');
const autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', () => {
this.place = autocomplete.getPlace();
})
}
}

register.component.html

<input id="googlePlaces" type="text" class="input-custom" formControlName="location" placeholder="Enter Place">

我已经在主index.html文件中添加了带有有效API密钥的脚本，这似乎可以在第一次使用时使用

Answer 1

您没有使用正确的方式在角度中初始化谷歌地图

看看这个代码，你会在谷歌上找到你的快乐：)

this._mapsAPILoader.load().then(() => {
let autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocompleteInput'), {});
google.maps.event.addListener(autocomplete, 'place_changed', () => {
this._ngZone.run(() => {
const place = autocomplete.getPlace();
...
});
...
});

mapsAPILoader和ngZone必须添加到构造函数中

constructor(
private _mapsAPILoader: MapsAPILoader,
private _ngZone: NgZone) { }

如果有帮助，请毫不犹豫地投票；)

Answer 2

您可以尝试：

let listen; 
this._mapsAPILoader.load().then(() => {
let autocomplete = new  google.maps.places.Autocomplete(document.getElementById('autocompleteInput'), {});
listen = google.maps.event.addListener(autocomplete, 'place_changed', () => {
this._ngZone.run(() => {
const place = autocomplete.getPlace();
...
});
...
});
...
google.maps.event.removeListener(listen); // then you can reload autocomplete without problens