Question

我已经成功集成了https://github.com/FaridSafi/react-native-google-places-autocomplete，现在只需要知道如何从邮政编码中获取建议。示例：当我在搜索文字输入中输入“ 35801”时，应该在建议中给我“阿拉巴马州汉茨维尔”，而不是其他所有地址“阿拉巴马州汉茨维尔”

我的自动填充组件

<GooglePlacesAutocomplete
  placeholder='Search'
  minLength={2}
  autoFocus={false}
  returnKeyType={'search'}
  keyboardAppearance={'light'}
  listViewDisplayed={false}
  fetchDetails={true}
  keyboardShouldPersistTaps="handled"
  renderDescription={row => row.description}
  onPress={(data, details = null) => {
    console.log(data,details);
    this.setState({location:data.structured_formatting.main_text, user_long:details.geometry.location.lng, user_lat: details.geometry.location.lat })
  }}
  enablePoweredByContainer={false}
  getDefaultValue={() => ''}
  textInputProps={{
    ref: (input) => {this.fourthTextInput = input}
  }}
  query={{
    // available options: https://developers.google.com/places/web-service/autocomplete
    key: 'AIzaSyC8h5--lK_Hd7IIpkLIyy75xCY_VkPyg1k',
    language: 'en',
    region: "US", //It removes the country name from the suggestion list
    types: '', // default: 'geocode'
    components: 'country:us'
  }}
  styles={{
    container: {width:width/1.4}
    textInputContainer: {
      backgroundColor: 'transparent',
      margin: 0,
      width: width / 1.4,
      padding:0,
      borderTopWidth: 0,
      borderBottomWidth:0
    },
    textInput: {
      textAlign: 'center',
      minWidth: width/1.4, 
      borderColor: "#cbb4c0",
      borderBottomWidth: 1,
      color: '#5d5d5d',
      fontSize: 14,
    },
    description: {
      color:'#ac879a',
      fontWeight: '300'
    },
    predefinedPlacesDescription: {
      color: '#1faadb'
    }
  }}
  currentLocation={false} 
  nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
  GoogleReverseGeocodingQuery={{// available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
  }}
  GooglePlacesSearchQuery={{
    // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
    rankby: 'distance',
    type: 'cafe'
  }}    
  GooglePlacesDetailsQuery={{
    // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
    fields: 'formatted_address',
  }}
  filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']}
  debounce={200}
/>

Answer 1

您可以在查询属性中使用“（区域）”类型。

<GooglePlacesAutocomplete
    placeholder="Search"
    onPress={(data, details = null) => {
      // 'details' is provided when fetchDetails = true
      console.log(data, details);
    }}
    query={{
      key: GOOGLE_PLACES_API_KEY,
      language: "en", // language of the results
      types: "(regions)",
    }}
  />

如果您只想在特定国家/地区搜索，请使用：

query={{
      key: GOOGLE_PLACES_API_KEY,
      language: "en", // language of the results
      types: "(regions)",
      components: "country:us",
    }}

Answer 2

邮政编码位于 onPress 事件返回的“详细信息”中。

它实际上会在一个对象数组（address_components）里面。

问题是它的位置可以变化。

我发现的最好方法是迭代这个数组，寻找“postal_code”类型。

这对我有用：

const [postalCode, setPostalCode] = useState("")

return (
    <GooglePlacesAutocomplete
        placeholder='Search'

        onPress={(data, details) => {

            for (let i = 0; i < details.address_components.length; i++) {
               
                if (details.address_components[i].types[0] === "postal_code") {
                    setPostalCode(details.address_components[i].long_name)
                }

            }
        }}
        
        enablePoweredByContainer={false}
        fetchDetails={true}
        onFail={(error) => console.log("Error at finding location: ", error)}
        query={{
            key: googleKey,
            language: "en",
        }}
    />
)

于 08/07/21 编辑

另一种选择是拆分在 details.formatted_address 上收到的字符串。

这可能更容易。

我希望它有所帮助！

我正在使用react-native-google-places-autocomplete搜索地点，但无法配置邮政编码

2 个答案: