谷歌地图的地方自动完成 addEventListener 不起作用答案

【问题标题】：google maps places autocomplete addEventListener doesn't work谷歌地图的地方自动完成 addEventListener 不起作用
【发布时间】：2016-12-06 11:06:15
【问题描述】：

我一直在尝试在 ionic 2 项目中添加谷歌地图位置自动完成以更新用户位置。但是，addEventListener 似乎不起作用，并且没有控制台错误，谁能告诉我哪里出错了？

 ngAfterViewInit() {
   let input = < HTMLInputElement > document.getElementById("auto");
   console.log('input', input);
   let options = {
     componentRestrictions: {
       country: 'IN',
       types: ['(regions)']
     }
   }
   let autoComplete = new google.maps.places.Autocomplete(input, options);
   console.log('auto', autoComplete);
   google.maps.event.addListener(autoComplete, 'place_changed', function() {
     this.location.loc = autoComplete.getPlace();
     console.log('place_changed', this.location.loc);
   });
 }

<ion-label stacked>Search Location</ion-label>
<input type="text" id="auto" placeholder="Enter Search Location" [(ngModel)]="location.loc" />

index.html

&lt;script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxx&amp;libraries=places"&gt;&lt;/script&gt;

【问题讨论】：

标签： angular ionic2 google-maps-autocomplete

【解决方案1】：

您可以使用箭头函数来保留this 和ChangeDetectionRef 来检测变化，因为谷歌地图事件是在角度区域外触发的：

constructor(private cd: ChangeDetectorRef) { }

google.maps.event.addListener(autoComplete, 'place_changed', () => { // arrow function
  this.location.loc = autoComplete.getPlace();
  this.cd.detectChanges(); // detect changes
  console.log('place_changed', this.location.loc);
});

autoComplete.getPlace();返回Object，所以可以得到地址如下：

var place =  autoComplete.getPlace();
this.location.loc = place.formatted_address;

Plunker Example

【讨论】：

我试过了，但是当我没有输入下拉显示时仍然一样，但是当我输入时 console.log('place_changed', this.location.loc) 打印输入的值
你把function() {改成() =>了吗？
我发现了问题，这是由于选项中的 types 属性导致下拉菜单没有显示。谢谢

【解决方案2】：

尝试使用以下组件检查autoComplete 上的place_changed 事件：

import {Component, ViewChild, ChangeDetectorRef} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div>      
      <input #auto />
      {{ location?.formatted_address | json}}
    </div>
  `,
})
export class App {
  @ViewChild('auto') auto:any;

  location: any;

  constructor(private ref: ChangeDetectorRef) {
  }

  ngAfterViewInit(){
    let options = {
      componentRestrictions: {
        country: 'IN'
      }
    };
    let autoComplete = new google.maps.places.Autocomplete(this.auto.nativeElement, options);

    console.log('auto', autoComplete);

    autoComplete.addListener('place_changed', () => {
      this.location = autoComplete.getPlace();
      console.log('place_changed', this.location);
      this.ref.detectChanges();
    });
  }
}

由于place_changed 是在 Angular js 外部触发，我们需要手动使用 ChangeDetectorRef 触发角度变化检测。

【讨论】：

是的，我试过了，但下拉菜单没有显示，也没有控制台错误
要更新模型，我们需要使用ChangeDetectorRef通过手动触发变更检测来更新模型