reactjs React-google-places-autocomplete街道地址组件不工作?

n1bvdmb6  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(142)

我试图将我的自动完成地址拆分成单独的组件来自动填充地址表单。我可以让大多数地址组件工作,但当我到达“Street_address”部分时,它不工作。我从Google自己的文档中复制并粘贴了参数名称,但当我运行代码时,我得到“Undefined”。以下是组件结构:

<GooglePlacesAutocomplete
                    apiKey={process.env.REACT_APP_PLACES_ID}
                    apiOptions={{ language: 'en', region: 'en' }}
                    selectProps={{
                        onChange: async (value) => {
                            setLocation(value)
                            const address = value?.label || ''

                            if (address) {
                                let place = await geocodeByAddress(address)
                                const { lat, lng } = await getLatLng(place[0])

                                let address_components = {}
                                for (var i = 0; i < place[0].address_components.length; i++) {
                                    var addressType = place[0].address_components[i].types[0]
                                    switch (addressType) {
                                        case 'postal_code':
                                            address_components.postal_code = place[0].address_components[i].short_name
                                            break
                                        case 'street_address':
                                            address_components.street_address = place[0].address_components[i].long_name
                                            break
                                        case 'administrative_area_level_1':
                                            address_components.administrative_area_level_1 = place[0].address_components[i].short_name
                                            break
                                        case 'locality':
                                            address_components.locality = place[0].address_components[i].short_name
                                            break
                                    }
                                    console.log(address_components.street_address)
                                    console.log(address_components.locality)
                                    console.log(address_components.administrative_area_level_1)
                                    console.log(address_components.postal_code);
                                    console.log(lat)
                                    console.log(lng)
                                }
                                const searchedAddress = {
                                    address: value,
                                    lat,
                                    lng
                                }
                                SaveLocation(searchedAddress);
                            }

                        },
                        isClearable: true,
                        value: location,
                        placeholder: placeholder
                    }}
                />

城市,州,邮政,lat & lng都返回正常,但无论我做什么,我都不能得到工作的street_address。我也试过long_name和short_name,没有区别。你知道为什么会发生这种情况吗?任何帮助都非常感谢!
另外,如果任何人有任何替代解决方案使用自动完成,我是开放给他们。只是试图填写一个地址表使用自动完成。

yjghlzjz

yjghlzjz1#

感谢@MrUpsidown的评论,所选地址分解为单独的组成部分,street_address不在其中。必须将street_numberroute放在一起才能得到正确的街道地址部分。

for (var i = 0; i < place[0].address_components.length; i++) {
                                    var addressType = place[0].address_components[i].types[0]
                                    switch (addressType) {
                                        case 'street_number':
                                            address_components.street_number = place[0].address_components[i].short_name
                                            break
                                        case 'route':
                                            address_components.route = place[0].address_components[i].short_name
                                            break
                                        case 'locality':
                                            address_components.locality = place[0].address_components[i].short_name
                                            break
                                        case 'administrative_area_level_1':
                                            address_components.administrative_area_level_1 = place[0].address_components[i].short_name
                                            break
                                        case 'postal_code':
                                            address_components.postal_code = place[0].address_components[i].short_name
                                            break
                                    }
                                    console.log(place[0].address_components[i])
                                }

相关问题