谷歌地图自动完成和 Angular 6 出错答案

【问题标题】：Error with Google Maps autocomplete and Angular 6谷歌地图自动完成和 Angular 6 出错
【发布时间】：2019-06-02 16:51:32
【问题描述】：

我正在尝试在 Angular 6 中使用 Google 地图自动完成功能。我在模式中有一个输入文本。代码如下：

<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 的实例

【问题讨论】：

标签： angular typescript google-maps autocomplete

【解决方案1】：

您的输入元素（#searchTextField）本身就是一个

HTMLInputElement

也许你像这样重写 autocompleteFn() 的开头：

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

获取文本输入元素引用的更 Angular 方法是使用

@ViewChild

装饰器来查询视图。在您的 View-Class 中看起来像以下内容：

@ViewChild('searchTextField') input : ElementRef;

并在你的模板文件中对应：

<input #searchTextField ...

这样您就可以在函数中使用声明的变量 input，如下所示：

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

【讨论】：

【解决方案2】：

只需将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);
    });
  }

【讨论】：