Как установить центр на StandaloneSearchBox в Google Maps реагировать

Question

Я использую реагирование Google Maps Standalonesearchbox, все в порядке, но как я могу показать сначала рядом с местоположением в подсказках (местах) поиска карты Google, как правило, когда мы используем карту с окном поиска, то мы прикрепляем оба друг друга, но здесь я не сделал добавить карту.
так что здесь мой вопрос, как я могу установить центр или показать ближайший поиск сначала на подсказках поиска мест Google.

вот мой код

import React from 'react';
import {connect} from 'react-redux';
import { Input,Icon} from 'antd';
import 'antd/dist/antd.css';
import {pickupHandler,pickupAddHandler,dropoffHandler} from '../actions';
import config from '../../../config'
const { compose, withProps, lifecycle,withHandlers } = require("recompose");
const {
    withScriptjs,
  } = require("react-google-maps");
  const { StandaloneSearchBox } = require("react-google-maps/lib/components/places/StandaloneSearchBox");


const SearchBox = compose(
  withProps({
    googleMapURL: config.MapApi,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
  }),
  lifecycle({
    componentWillMount() {
      const refs = {}

      this.setState({
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
        onBoundsChanged: () => {
            this.setState({
              bounds: refs.map.getBounds(),
              center: refs.map.getCenter(),
            })
          },
        onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();

          places.map(({ place_id, formatted_address, geometry: { location } }) =>{
            this.props.latlngHandler({lat:location.lat(),lng:location.lng()})
            this.props.AddressHandler(formatted_address)
          })
          this.setState({
            places,
          });
        },
        suffix: () =>{
            this.props.AddressHandler('')
            this.props.latlngHandler(false);
        }
      })
    },

  }),
  withHandlers(() => {
    return{
        cutPickIcon:<Icon type="close-circle" />
    }
  }),
  withScriptjs  
)(props =>
  <div data-standalone-searchbox="">
    <StandaloneSearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      onBoundsChanged={props.onBoundsChanged}
      onPlacesChanged={props.onPlacesChanged}
    >
      <Input
        prefix={<Icon type="environment-o" style={props.name === 'pick' ? { color: '#EA4335' }: { color: '#00E64D' }} />}
        type="text"
        placeholder={props.placeHoler}
        onChange={props.Field}
        onFocus={props.FocusGA}
        value={props.Address}
        className='input'
        suffix={props.Suffix ? <Icon type="close-circle" onClick={props.suffix}/> :''}
      />
    </StandaloneSearchBox>

  </div>
);

export default connect(null,{pickupAddHandler,pickupHandler,dropoffHandler})(SearchBox)

Answer 1

Вы можете использовать геокод карты, чтобы установить границы опоры на StandaloneSearchBox,

Пожалуйста, обратитесь к моему ответу на этот пост. /questions/20063745/initsializirujte-react-google-maps-standalonesearchbox-s-pomoschyu-geokoda/20063760#20063760