Question

我是AngularJS的新手，我尝试在一个页面上实现多个Google Maps API表单。我使用来自＆＃39; google-maps＆＃39;的AngularJS和GoogleMapsLoader。封装

我有以下HTML模板：

<input id="{{$ctrl.element_id}}" type="text" ng-model="$ctrl.input"/>

和控制器构造函数的一部分：

this.element_id = 'autocomplete_' + this.uuidv4()

GoogleMapsLoader.load((google) => {
    this.autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById(this.element_id)),
        {types: ['establishment', 'geocode']})
    this.autocomplete.addListener('place_changed', () => {
      let place = this.autocomplete.getPlace()
      console.log(place)
      this.getAddress(place)
      safeApply()
    })
})

我的想法是，无论何时执行google maps API组件，我都会生成一个唯一的element_id并将其传递给模板并传递给函数getElementById()。

当我启动我的应用程序并进入我有组件的页面时，谷歌地图自动完成一切正常，但当我再次进入同一页面时，我收到错误：

ValueError: not an instance of HTMLInputElement

然后，如果我刷新页面（F5），我谷歌地图自动完成工作正常（但只有一次）。

如何在一个页面上使用多个Google地图自动填充输入？

多个Google自动填充：ValueError：不是HTMLInputElement的实例

0 个答案: