Google Maps Javascript API 在 Ionic 2 中工作吗?

Question

我希望你们都没事:)

我正在使用谷歌地图(地图+地点搜索框(在离子框架中开发一个简单的应用程序。问题是在我尝试搜索地址(即加利福尼亚州圣地亚哥的莫雷纳大道 #1(之前一切正常，输入向我显示建议的地址，但是当我选择其中一个时，它永远不会完成我的<ion-input>元素中的文本......

当我使用ionic serve运行我的应用程序时，它在我的浏览器中运行得很好，但在我的 iPhone 或 Android 设备中却没有。您是否遇到过这样的问题？

这是我的代码(前端(：

<ion-content no-padding>
<ion-searchbar #searchAddress id="searchAddress" [showCancelButton]="false" [(ngModel)]="address">
</ion-searchbar>

这是我将 SearchBox 实例设置为我的离子搜索栏内部输入控件的代码......

@ViewChild('searchAddress', {read: ElementRef}) searchElement: ElementRef;
...
...
...
...
let input = this.searchElement.nativeElement.querySelector('.searchbar-input');
let searchBox = new google.maps.places.SearchBox(input);
searchBox.addListener('places_changed', () => {
let places = searchBox.getPlaces();
if(!places && places.length === 0) return;
this.address = places[0].formatted_address;
this.latitude = places[0].geometry.location.lat();
this.longitude = places[0].geometry.location.lng();
if(places[0].address_components.length === 0) {
this.street = places[0].address_components[1].long_name;
this.selectedEstate = places[0].address_components[4].long_name;
}
});

它正在我的ionViewDidEnter()活动中运行

Answer 1

尝试将侦听器中的所有内容包装在 NgZone 中：

import { NgZone } from '@angular/core';
export class myPage {
zone: NgZone;
constructor() {
this.zone = new NgZone({enableLongStackTrace: false});
}
...
searchBox.addListener('places_changed', () => {
this.zone.run(() => {
let places = searchBox.getPlaces();
if(!places && places.length === 0) return;
this.address = places[0].formatted_address;
this.latitude = places[0].geometry.location.lat();
this.longitude = places[0].geometry.location.lng();
if(places[0].address_components.length === 0) {
this.street = places[0].address_components[1].long_name;
this.selectedEstate = places[0].address_components[4].long_name;
}
});
});
}

如果这有效，则意味着您的侦听器回调是在角度上下文之外执行的，这意味着它不会触发更改检测，也不会更新值。我曾经遇到过类似的问题(只有手机受到影响(，所以它可能与性能或效率优化有关，以节省电池寿命。