react-google-maps StandaloneSearchBox 设置特定的国家限制？

Question

我正在尝试使用 react-google-maps StandaloneSearchBox 设置特定的国家/地区限制。

我试过componentRestrictions，但不知道怎么用。

在下面分享我的代码：

    export const AutoCompleteSearchBox = compose(
    withProps({
      googleMapURL:googleMapUrl,
      loadingElement: <div style={{ height: `100%` }} />,
      containerElement: <div style={{ height: `400px`, top:'3px' }} />,
    }),
    lifecycle({
       componentWillMount() {
         const refs = {}
         this.setState({
           types: ['(regions)'],
           componentRestrictions: {country: "bd"},
           onSearchBoxMounted:ref =>{ refs.searchBox = ref; },
           onPlacesChanged:()=>{ 
             const places = refs.searchBox.getPlaces(); 
             this.props.onPlacesChanged(places); 
           },
         })
         const options = {
          types: ['(regions)'],
          componentRestrictions:{ country: 'bd' }
          }
       },
     }),
     withScriptjs  
   )`(props =>
     <div data-standalone-searchbox="">
       <StandaloneSearchBox 
            ref={props.onSearchBoxMounted} 
            bounds={props.bounds} 
            onPlacesChanged={props.onPlacesChanged} 
            controlPosition={ window.google.maps.ControlPosition.TOP_LEFT}
        >
       <TextField 
            className={props.inputClass}
            placeholder={props.inputPlaceholder}
            label={props.inputLabel}
            name={props.inputName} 
            value={props.inputValue}
            onChange={props.inputOnChange}
            helperText={props.inputHelperText}
            error={props.inputError}
        />
       </StandaloneSearchBox>
     </div>
   );`

我该如何解决这个问题？

Answer 1

您不能为 SearchBox 结果添加此类限制，但您可以指定查询预测偏向的区域。预测偏向于但不限于针对这些边界的查询。

如果您只想显示特定地点，那么您可以Google Place Autocomplete 功能。为此，您无需为 Google 地图使用额外的 React 库。示例如下：

import React, { Component } from 'react';
import Script from 'react-load-script'

class LocationMap extends Component {

    handleScriptLoad() {
        const inputEl = document.getElementById('address-input');

        /*global google*/
        var options = {
            //types: ['address'],
            componentRestrictions: {country: 'by'}
        };
        this.autocomplete = new google.maps.places.Autocomplete(inputEl, options);
        this.autocomplete.addListener('place_changed', this.handlePlaceSelect.bind(this));
    }

    handlePlaceSelect() {
        console.log(this.autocomplete.getPlace());
    }

    render() {
        return (
            <section>
                <Script
                    url="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=3.33&libraries=places&language=en&region=US"
                    onLoad={this.handleScriptLoad.bind(this)}
                />        

                <div className="form-group">
                    <label htmlFor="address-map">Enter address</label>
                    <input type="text"
                           autoComplete="new-password"
                           className="form-control"
                           id="address-input"
                           name="address"/>
                </div>
            </section>
        );
    }
}

export default LocationMap;

别忘了添加react-load-script包：npm i react-load-script --save