如何使用Google自动完成和Vue js来自动填写地址？

Posted 2023-02-22

我是Vue js的新手，我试图使用自动完成API来自动填写我的表单中的地址字段，当用户开始输入并从下拉菜单中选择一个地址后。文档中的代码使用的是Vanilla javascript，我想把它转换为Vue js并整合到我现有的表单中。

在我的数据中，我有一个叫做 employerProfileData 的对象，我使用 v-model 在表单输入中使用这个对象。

data() 
            return 

                employerProfileData: 
                    company_name: '',
                    phone: '',
                    number_of_employees: '1-25',
                    options: [
                         value: '1-25', text: '1-25' ,
                         value: '25-50', text: '25-50' ,
                         value: '50-100', text: '50-100' ,
                         value: '100-250', text: '100-250' ,
                         value: '250-500', text: '250-500',
                         value: '500-1000', text: '500-1000'
                    ],
                    street: '',
                    city: '',
                    country: 'Canada',
                    optionsTwo: [
                         value: 'Canada', text: 'Canada' ,
                         value: 'United States', text: 'United States' 
                    ],
                    province_state: '',
                    zip_postal: '',
                ,

                errors: ,

            ;

现在，我从自动完成对象中得到的地方细节是这样的。const place = autocomplete.getPlace();. 现在，我可以像这样访问address_component。place.address_components 来获取我想分配给我的输入字段的值，就像这样。

mounted() 

            const autocomplete = new google.maps.places.Autocomplete(
                document.getElementById("autocomplete"),
                
                    bounds: new google.maps.LatLngBounds(
                        new google.maps.LatLng(43.651070, -79.347015)
                    )
                );

            function fillInAddress() 

                // Get the place details from the autocomplete object.
                const place = autocomplete.getPlace();

                this.employerProfileData.street = place.address_components[0].short_name + place.address_components[1].long_name;
                this.employerProfileData.city = place.address_components[2].long_name;
                this.employerProfileData.country = place.address_components[5].long_name;
                this.employerProfileData.province_state = place.address_components[4].short_name;
                this.employerProfileData.zip_postal = place.address_components[6].short_name;

            

            autocomplete.addListener("place_changed", fillInAddress);

        

但似乎我不能在下面的 fillInAddress() 函数，但我得到这个错误。

TypeError: Cannot set property 'street' of undefined

我需要 bind.(this) 关于 fillInAddress 函数.挂载()

            const autocomplete = new google.maps.places.Autocomplete(
                document.getElementById("autocomplete"),
                
                    bounds: new google.maps.LatLngBounds(
                        new google.maps.LatLng(43.651070, -79.347015)
                    )
                );

            function fillInAddress() 

                // Get the place details from the autocomplete object.
                const place = autocomplete.getPlace();

                this.employerProfileData.street = place.address_components[0].short_name + place.address_components[1].long_name;
                this.employerProfileData.city = place.address_components[2].long_name;
                this.employerProfileData.country = place.address_components[5].long_name;
                this.employerProfileData.province_state = place.address_components[4].short_name;
                this.employerProfileData.zip_postal = place.address_components[6].short_name;

            

            autocomplete.addListener("place_changed", fillInAddress.bind(this));

        ,

答案

你可能会对以下内容感兴趣 vue-google-autocomplete(自动完成) 包。

使用实例。

<vue-google-autocomplete
  id="map"
  classname="form-control"
  placeholder="Start typing"
  v-on:placechanged="getAddressData"
/>

它的demo由于超过了每天免费请求的限制，今天无法使用，但它似乎是合法的。

如果你想自己做的话，我建议你检查一下什么是 this 指内 fillInAddress 使用调试器。也许绑定上下文会有帮助。

autocomplete.addListener("place_changed", fillInAddress.bind(this))