Google在quasar vue问题中自动填充没有地图的地址答案

【问题标题】：Google auto populate address without map in quasar vue issueGoogle在quasar vue问题中自动填充没有地图的地址
【发布时间】：2020-12-08 10:00:54
【问题描述】：

我正在使用 quasar 框架。还有用于自动填充地址的 VueGmaps 包，我使用它安装它 npm install vue-gmaps --save

<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 未在控制台中定义。请查看下面的截图

当有人在文本字段中输入任何内容并从地址中获取城市、州、街道时，我希望它给出地址建议不显示地图。

谁能帮我解决这个问题？

谢谢

【问题讨论】：

标签： google-maps vue.js google-api autocomplete quasar

【解决方案1】：

我删除了 vue-google-autocomplete 包。

我发现我给出的是参考而不是 id，我猜 google map api 只适用于 id 属性。

这是在不使用任何软件包的情况下对我有用的解决方案它可能会帮助一些人。

并在安装中

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);
 }
});

【讨论】：