javascript - Google map Javascript API 在 Ionic 2 中工作吗？

Question

希望你们一切都好:)

我正在使用 Google map ( map + 地点搜索框)在 Ionic 框架中开发一个简单的应用程序。问题是，一切正常，直到我尝试搜索一个地址(即 Morena Blvd #1，圣地亚哥，加利福尼亚州)，输入向我显示建议的地址，但当我选择其中一个时，它永远不会完成我的 <ion-input> 中的文本元素...

当我使用 ionic serve 运行我的应用程序时，它在我的浏览器中运行得很好，但在我的 iPhone 或 Android 设备中则不然。您遇到过类似的问题吗？

这是我的代码(前端):

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

这是我将 SearchBox 实例设置为 ion-searchbar 内部输入控件的代码...

@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;
        }
      });
    });
}

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