Question

我正在使用react 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上设置边界prop。

请参阅我对此帖子的回答。 https://stackoverflow.com/a/53396781/1661712

如何在React Google Maps中的StandaloneSearchBox上设置中心

1 个答案: