Я пытаюсь включить API карт Google Maps в мое приложение angular 7 в качестве директивы, чтобы любой элемент шаблона, в который он включен, получал предложения по автозаполнению адреса карты Google. Вот код моей директивы:
import { Directive, OnInit, ElementRef, ContentChildren } from '@angular/core';
import {} from 'googlemaps';
@Directive({
selector: '[appGoogleMaps]'
})
export class GoogleMapsDirective implements OnInit {
autocomplete: any;
constructor(private elem: ElementRef) {}
@ContentChildren("formControl") varInputBoxes;
ngOnInit(){
this.initAutocomplete();
}
initAutocomplete(){
let googleMapsOptions = {types: ['address']};
this.autocomplete = new google.maps.places.Autocomplete(this.elem.nativeElement, googleMapsOptions);
this.autocomplete.setFields(['geometry']);
this.autocomplete.addListener('place_changed', this.getInfo);
}
getInfo(){
let info = this.autocomplete.getPlace();
}
}
В моем файле индекса. html я включил следующий код:
<body>
<app-root></app-root>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY"></!--script>
</body>
Затем я включил "appGoogleMaps" в свой файл адресное поле ввода поиска в шаблоне. Когда я щелкаю в поле ввода и начинаю печатать, Google Maps начинает предлагать подходящие адреса, как и ожидалось. Тем не менее, когда я нажимаю на адрес, я получаю следующую ошибку: «Ошибка типа: не могу прочитать свойство 'getPlace' из неопределенного. Я не в курсе, как решить эту проблему, и мои исследования по этой топике c не помогли Я не понимаю, почему внезапно "this.autocomplete" становится неопределенным внутри функции getInfo. Оцените некоторую помощь.