Как ограничить результаты автозаполнения Google только городом, штатом, страной, почтовым индексом? - PullRequest
0 голосов
/ 30 марта 2020

Я использую пакет реаги-мест-автозаполнение . в настоящее время я ограничен только регионом и США.

Теперь я пытаюсь ограничиться только городом, штатом, страной и почтовым индексом.

Проблема:

  1. Если я использую регионы, он также показывает города, но мне нужны только город, штат, страна и почтовый индекс в поиске
  2. Если я использую города, он показывает город, штат и страна, но почтовый индекс не отображается в поиске.

ожидаемый результат я хочу выводить как город, штат, страну и почтовый индекс исключая местность , поселки, населенные пункты

код

import PlacesAutocomplete, {
    geocodeByAddress,
    getLatLng,
  } from 'react-places-autocomplete';

const searchOptions = {
    types: ['(regions)'],
    // types: ['(cities)'],
    componentRestrictions: {country: "us"}
}

 handleChange = address => {
    this.setState({ address });
  };

  handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => console.log('Success', latLng))
      .catch(error => console.error('Error', error));
  };

render() {
    const renderFunc = ({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
            <div>
                <input
                    className="location-field"
                    {...getInputProps({
                        placeholder: 'Search Places ...',
                        className: 'input-box location-search-input form-control field-list',
                    })}
                />
                <div className="autocomplete-dropdown-container">
                    {loading && <div>Loading...</div>}
                    {suggestions.map(suggestion => {
                        const className = suggestion.active
                            ? 'suggestion-item--active'
                            : 'suggestion-item';
                        // inline style for demonstration purpose
                        const style = suggestion.active
                            ? { backgroundColor: '#fafafa', cursor: 'pointer', margin: '0px 0px 0px 10px', width: '70%' }
                            : { backgroundColor: '#ffffff', cursor: 'pointer', margin: '0px 0px 0px 10px', width: '70%'};
                        return (
                            <div
                                {...getSuggestionItemProps(suggestion, {
                                    className,
                                    style,
                                })}
                            >
                                <span>{suggestion.description}</span>
                            </div>
                        );
                    })}
                </div>
            </div>
        );

    retrun <div>
        <PlacesAutocomplete
        value={this.state.address}
        onChange={(address)=>this.handleChange(address)}
        onSelect={(e)=>this.handleSelect(e, fieldConstants.region)}
        searchOptions={searchOptions}
        >
            {renderFunc}
        </PlacesAutocomplete>

    </div>
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...