有人可以告诉我如何初始化React谷歌地图的StandaloneSearchBox组件类型:['geocode'](就像在原始的google.maps.places.Autocomplete,所以我可以限制自动完成的输入建议?
StandaloneSearchBox是google.maps.places.SearchBox的包装器。 因此,SearchBox的Google文档说:
SearchBox构造函数有两个参数:
- 一个类型为text的HTML输入元素。这是SearchBox服务将监视并将其结果附加到的输入字段。
- options参数,可以包含bounds属性:bounds是一个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 class,表示地理坐标中的矩形。
亚历山大的建议让我能够做到这样的事情。将地址传递到地址搜索并使用地理编码通过搜索进行近距离搜索。希望这可以帮助。
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" />