我有一个没有地图的google.maps.places.SearchBox的反应组件,这是一个StandaloneSearchBox。我想传递带有初始值的道具(这只是地址的格式化版本,例如“伦敦,肯塔基州,États-Unis”)然后能够在输入字段中更改地址。
我在州有一个地方财产,我想要持有地方对象。如何在componentDidMount()方法的开头传递初始值,以便我可以将其设置为places对象。它不会以这种方式工作。
const PlacesWithStandaloneSearchBox = compose(
withProps({
googleMapURL: googleMapsURI,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />
}),
lifecycle({
componentWillMount() {
console.log("componentWillMount");
const refs = {};
this.setState({
places: [],
onSearchBoxMounted: ref => {
refs.searchBox = ref;
},
onPlacesChanged: () => {
const places = refs.searchBox.getPlaces();
this.setState({
places
});
}
})
},
componentDidMount() {
this.setState({
places: this.props.value
});
}
}),
withScriptjs
)(props =>
<div className="fretlink-input form-group" data-standalone-searchbox="">
<StandaloneSearchBox
ref={ props.onSearchBoxMounted }
bounds={ props.bounds }
onPlacesChanged={ props.onPlacesChanged }>
<input
className="form-control"
placeholder={ props.placeholder }
type="text" />
</StandaloneSearchBox>
<ol>
{ props.places.map(({ place_id, formatted_address, geometry: { location } }) =>
<li key={ place_id }>
{ formatted_address }
{" at "}
({location.lat()}, {location.lng()})
</li>
)}
</ol>
</div>
);
export default PlacesWithStandaloneSearchBox;
答案 0 :(得分:0)
您可以在这里查看我的答案:Initialize React Google Maps StandaloneSearchBox with geocode
通常,您不能将地址用作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)
)}
答案 1 :(得分:0)
看来,基于地址文本或经纬度的搜索,无法使用实际的Google Maps地点对象初始化StandaloneSearchBox
,而不能使用组件prop或其他方式立即使用。
我认为您最好的办法是自己实现,方法是使用Google Maps places API手动搜索您拥有的所有数据,获取该初始位置,然后通过{{1 }},如您的示例。
但是,我没有这样做,因为我找到了一个简单得多的解决方案,而且我认为这也适用于您的情况。
如果您使用的是格式化的地址,那么实际上根本没有理由执行搜索并使用完整的Google Maps位置填充组件。您真正需要的只是输入中显示的文本。当然,当您搜索新地址时,您需要所有数据(经纬度等),但这已经在起作用。对于初始地址,您可能已经有此数据。您真正关心的只是this.setState
中显示的内容。
幸运的是,将componentDidMount
的行为与<input>
的行为区分开来确实很容易,因为<input>
只是您可以完全控制的子组件。
我所做的只是使用更多的组件状态来保存输入应显示的文本,然后使其成为受控组件。其他所有工作方式都完全相同,只是我控制了“视图”,即显示在StandaloneSearchBox
中的文本。
以下是使用您的代码来说明我的意思的粗略示例:
<input>