如何使用给定地址初始化StandaloneSearchBox组件?

时间:2017-11-22 14:37:45

标签: reactjs google-maps higher-order-components react-google-maps

我有一个没有地图的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;

2 个答案:

答案 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>