Google自动在类星vue问题中填充地址而不显示地图

问题描述

我正在使用类星体框架。 和用于自动填充地址的VueGmaps软件包，我使用它安装了它 npm install vue-gmaps-保存

<script>
  import Vue from "vue";
  import VueGmaps from 'vue-gmaps'
  mounted() {
     this.autocomplete = new google.maps.places.Autocomplete(
     (this.$refs.autocomplete),{ 
       type: ['geocode'],componentRestrictions: { country: 'NZ' }
     }
  )
  this.autocomplete.addListener('changed_place',()=>{
    let place = this.autocomplete.getPlace()
    let ac = place.address_components
    let city = ac
    this.city = city
    this.cities.push(ac[0]['short_name'].concat(',',ac[2]['short_name']))

    console.log(this.city);
  })
 },</script>

     <teamplate>
       <q-input              
          ref="autocomplete"              
          v-model="user.address"              
          filled              
          label="Physical Address"              
          hint="Your permanent address"              
          :rules="[val => !!val || 'This field is required.']"              
          />
     </template>

我遇到错误控制台中未定义google。请检查下面的屏幕截图

当任何人在文本字段中键入任何内容并从地址中提取城市，州或街道时，我希望它提供地址建议 不显示地图。

有人可以帮我吗？

谢谢

解决方法

我删除了vue-google-autocomplete软件包。

我发现我提供的是参考而不是id，我猜google map API仅适用于id属性。

这是不使用任何程序包对我有效的解决方案 它可能会有所帮助。 !! val ||‘此字段为必填。’]” />

并已安装

mounted() {
  this.autocomplete = new google.maps.places.Autocomplete(
   // (this.$refs.autocomplete),(document.getElementById(“address”)),{types: [‘geocode’]}
  );
 this.autocomplete.addListener(‘place_changed’,() => {
 let place = this.autocomplete.getPlace();
 let ac = place.address_components;
 console.log(ac);
 }
});