Question

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

Answer 1

您可以在这里查看我的答案：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)
  )}

Answer 2

看来，基于地址文本或经纬度的搜索，无法使用实际的Google Maps地点对象初始化StandaloneSearchBox，而不能使用组件prop或其他方式立即使用。

我认为您最好的办法是自己实现，方法是使用Google Maps places API手动搜索您拥有的所有数据，获取该初始位置，然后通过{{1 }}，如您的示例。

但是，我没有这样做，因为我找到了一个简单得多的解决方案，而且我认为这也适用于您的情况。

如果您使用的是格式化的地址，那么实际上根本没有理由执行搜索并使用完整的Google Maps位置填充组件。您真正需要的只是输入中显示的文本。当然，当您搜索新地址时，您需要所有数据（经纬度等），但这已经在起作用。对于初始地址，您可能已经有此数据。您真正关心的只是this.setState中显示的内容。

幸运的是，将componentDidMount的行为与<input>的行为区分开来确实很容易，因为<input>只是您可以完全控制的子组件。

我所做的只是使用更多的组件状态来保存输入应显示的文本，然后使其成为受控组件。其他所有工作方式都完全相同，只是我控制了“视图”，即显示在StandaloneSearchBox中的文本。

以下是使用您的代码来说明我的意思的粗略示例：

<input>

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

2 个答案: