用GeoCode初始化React React Google Maps AstalOneSearchBox

Question

有人可以告诉我如何初始化Google Maps的独立搜索盒组件，类型为：['geocode']（例如在原始的Google.maps.maps.places.places.places.autocomplete中输入的建议？

Answer 1

我能够对Alexandar的建议做这样的事情。将地址传递到地址搜索中，并使用地理码来搜索附近。希望这会有所帮助。

import React from 'react';
import { compose, withProps, lifecycle } from 'recompose';
import { withScriptjs } from 'react-google-maps';
import StandaloneSearchBox from 'react-google-maps/lib/components/places/StandaloneSearchBox';
import get from 'lodash/get';
import head from 'lodash/head';
import { Search } from '../components';
const GOOGLE_API_KEY = '123';
const AddressSearchbox = compose(
  withProps(props => {
    return {
      ...props,
      googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
      loadingElement: <div style={{ height: `100%` }} />,
      containerElement: <div style={{ height: `400px` }} />,
    };
  }),
  withScriptjs,
  lifecycle({
    componentDidMount() {
      const refs = {};
      this.setState({
        places: [],
        searchText: '',
        error: null,
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
        onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();
          this.setState({
            places,
            searchText: '',
          });
        },
      });
      ***
      const geocoder = new google.maps.Geocoder();
      geocoder.geocode({ address: this.props.placeName }, (results, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        const lngs = results[0].geometry.bounds.j;
        const lats = results[0].geometry.bounds.l;
        this.setState({
          boundSearch: new google.maps.LatLngBounds(
            new google.maps.LatLng(lats.l, lngs.l),
            new google.maps.LatLng(lats.j, lngs.j)
          ),
        });
      } else {
        this.setState({
          error: status,
        });
      }
      ***
      });
    },
  })
)(props => {
  return (
    <div data-standalone-searchbox="">
      <StandaloneSearchBox
        ref={props.onSearchBoxMounted}
        onPlacesChanged={props.onPlacesChanged}
        bounds={props.boundSearch}
      >
        <Search searchText={props.searchText} />
      </StandaloneSearchBox>
      <div>{get(head(props.places), 'formatted_address')}</div>
    </div>
  );
});
export default AddressSearchbox;
<AddressSearchbox address="cleveland, oh" />

Answer 2

AstalOneSearchBox是围绕Google.maps.places.searchbox。
的包装器因此，搜索框的Google文档说：

搜索框构造函数采用两个参数：

• 类型文本的HTML输入元素。这是输入字段 搜索框服务将监视并将其结果附加到。
• 选项 参数，可以包含边界属性：界限是一个 google.maps.latlngbounds对象指定要搜索的区域 对于位置。结果偏向但不限于 这些边界内包含的地方。

来源：https：//developers.google.com/maps/documentation/javascript/places-autocomplete#places_searchbox

因此，您可以这样称呼此组件：

<StandaloneSearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      onPlacesChanged={props.onPlacesChanged}
      defaultBounds={new google.maps.LatLngBounds(
            new google.maps.LatLng(40.712216, -74.22655),
            new google.maps.LatLng(40.773941, -74.12544)
      )}

其中 defaultBounds是一个latlngbounds类，代表地理坐标中的矩形。