使用地理编码初始化 React Google Maps StandaloneSearchBox [英] Initialize React Google Maps StandaloneSearchBox with geocode
本文介绍了使用地理编码初始化 React Google Maps StandaloneSearchBox的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有人可以告诉我如何使用类型初始化 React Google Maps 的 StandaloneSearchBox 组件:['geocode'](就像在原始的 google.maps.places.Autocomplete 中一样,所以我可以限制自动完成对输入的建议?
解决方案
我能够在 alexandar 的建议下做这样的事情.将地址传递到地址搜索中并使用地理编码进行附近搜索.希望这会有所帮助.
从'react'导入React;import { compose, withProps, Lifecycle } from 'recompose';从react-google-maps"导入 { withScriptjs };从 'react-google-maps/lib/components/places/StandaloneSearchBox' 导入 StandaloneSearchBox;从 'lodash/get' 导入获取;从 'lodash/head' 导入头;import { Search } from '../components';const GOOGLE_API_KEY = '123';const 地址搜索框 = 撰写(withProps(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` }}/>,};}),使用Scriptjs,生命周期({componentDidMount() {const refs = {};this.setState({地点:[],搜索文本:'',错误:空,onSearchBoxMounted: ref =>{refs.searchBox = ref;},onPlacesChanged: () =>{const 地方 = refs.searchBox.getPlaces();this.setState({地方,搜索文本:'',});},});***const geocoder = new google.maps.Geocoder();geocoder.geocode({ address: this.props.placeName }, (results, status) => {如果(状态 === google.maps.DirectionsStatus.OK){const lngs = results[0].geometry.bounds.j;const lats = results[0].geometry.bounds.l;this.setState({boundSearch: 新的 google.maps.LatLngBounds(新的 google.maps.LatLng(lats.l, lngs.l),新的 google.maps.LatLng(lats.j, lngs.j)),});} 别的 {this.setState({错误:状态,});}***});},}))(道具 => {返回 (<div data-standalone-searchbox=""><独立搜索框ref={props.onSearchBoxMounted}onPlacesChanged={props.onPlacesChanged}边界={props.boundSearch}><搜索 searchText={props.searchText}/></独立搜索框><div>{get(head(props.places), 'formatted_address')}</div>
);});导出默认地址搜索框;<AddressSearchbox 地址="克利夫兰,哦"/>
Can someone tell me how to initialize React Google Maps's StandaloneSearchBox component with types: ['geocode'] (like in the original google.maps.places.Autocomplete, so i can restrict the autocomplete's suggestions of the input?
解决方案
I was able to do something like this with alexandar's suggestion. Pass an address into the address search and use geocode to do a near by search. Hope this helps.
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" />
这篇关于使用地理编码初始化 React Google Maps StandaloneSearchBox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文