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

Question

我是 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();。现在，我可以像这样 place.address_components 访问 address_component 来获取我想分配给输入字段的值，就像这样。

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

------------更新了这个作品：------------

我需要在 fillInAddress 功能上 bind.(this)。安装（）{

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

        },

Answer 1

您可能会对 vue-google-autocomplete 包感兴趣。

用法示例：

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

由于超过了每天的免费请求限制，今天的演示无法运行，但它似乎是合法的。

如果您想自己做，我建议使用调试器检查 this 指向内部 fillInAddress 的内容。也许绑定上下文会有所帮助。

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

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

How to auto fill address using Google autocomplete and Vue js?

vue.js

autocomplete