Ошибка с автозаполнением Google Maps и Angular 6 - PullRequest
Новая
       19

Ошибка с автозаполнением Google Maps и Angular 6

0 голосов
/ 08 января 2019

Я пытаюсь использовать автозаполнение Google Maps с Angular 6. У меня есть ввод текста внутри модального. Вот код: 

<input id="searchTextField" type="text" google-place (onSelect)="autoMaps()" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />

autocompleteFn() {

        const input = window.HTMLInputElement(document.getElementById('searchTextField'));
        const autocomplete = new google.maps.places.Autocomplete(input);
        console.log(el);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {           
            const placee = autocomplete.getPlace();
            console.log(placee.name);
            console.log(placee.geometry.location.lat());
            console.log(placee.geometry.location.lng());
            let address = '';
              if (placee.address_components) {
                address = [
                  (placee.address_components[0] && placee.address_components[0].short_name || ''),
                  (placee.address_components[1] && placee.address_components[1].short_name || ''),
                  (placee.address_components[2] && placee.address_components[2].short_name || '')
                ].join(' ');
              }
              console.log(address);
        });
      }

При запуске и открытии модального я получаю эту ошибку:

InvalidValueError: не является экземпляром HTMLInputElement

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Просто измените window.HTMLInputElement(document.getElementById('searchTextField')) на document.getElementById('searchTextField') as HTMLInputElement

Html 

<input id="searchTextField" type="text" google-place (onSelect)="autoMaps()" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />

ц 

  autocompleteFn() {

    const input = document.getElementById('searchTextField') as HTMLInputElement;
    const autocomplete = new google.maps.places.Autocomplete(input);
    console.log(el);
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        const placee = autocomplete.getPlace();
        console.log(placee.name);
        console.log(placee.geometry.location.lat());
        console.log(placee.geometry.location.lng());
        let address = '';
          if (placee.address_components) {
            address = [
              (placee.address_components[0] && placee.address_components[0].short_name || ''),
              (placee.address_components[1] && placee.address_components[1].short_name || ''),
              (placee.address_components[2] && placee.address_components[2].short_name || '')
            ].join(' ');
          }
          console.log(address);
    });
  }
0 голосов
/ 08 января 2019

Ваш элемент ввода (#searchTextField) сам по себе является

HTMLInputElement

Может быть, вы переписали начало autocompleteFn () примерно так: 

const input = document.getElementById('searchTextField');
console.log(input);
const autocomplete = 
    new  google.maps.places.Autocomplete(input as HTMLInputElement);
...

Более угловой способ получения ссылки на элемент ввода текста - использовать

@ ViewChild

декоратор для запроса вида. Это будет выглядеть примерно так в вашем View-Class: 

@ViewChild('searchTextField') input : ElementRef;

и соответствующий в вашем шаблоне файл: 

<input #searchTextField ...

Таким образом, вы можете использовать объявленную переменную input как в вашей функции: 

...
const autocomplete = 
new  google.maps.places.Autocomplete(input as HTMLInputElement);
...
...