google maps places autocomplete addEventListener не работает

Question

Я пытаюсь добавить объекты google maps автоматически в ionic 2 project, чтобы обновить местоположение пользователя. Однако 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

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxx&libraries=places"></script>

Answer 1

Вы можете использовать функцию стрелки, чтобы сохранить this и ChangeDetectionRef, чтобы обнаружить изменения, потому что карта Google события увольняют за пределы угловой зоны:

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(); возвращает объект, так что вы можете получить адрес следующим образом:

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

Plunker Example

Answer 2

Try проверяя place_changed событие на autoComplete с ниже компонента:

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 запускает внешнее угловое js, нам необходимо вызвать обнаружение угловых изменений с помощью ChangeDetectorRef вручную.