2

我有一个没有地图的 google.maps.places.SearchBox 的反应组件，它是一个 StandaloneSearchBox。我想传递带有初始值的道具（这只是地址的格式化版本，例如“伦敦，肯塔基州，États-Unis”），然后能够更改输入字段中的地址。

我在该州有一个 places 属性，我想保存它的 place 对象。如何在 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;
4

2 回答 2

0

你可以在这里查看我的答案：Initialize React Google Maps StandaloneSearchBox with geocode

一般来说，您不能使用地址作为搜索框结果的过滤器，但您可以指定搜索地点的区域：

<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)
  )}
于 2018-09-20T21:05:25.193 回答
0

似乎StandaloneSearchBox不可能使用组件道具或其他方式开箱即用地使用基于地址文本或纬度 lng 搜索的实际谷歌地图地点对象来初始化。

我认为您能做的最好的事情就是自己实现这一点，通过使用您拥有的任何数据手动使用 Google Maps Places API 进行搜索，获取该初始位置，并按照您的示例设置this.setState它componentDidMount。

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

如果您有格式化的地址，实际上可能根本没有理由执行搜索并使用完整的 Google 地图位置填充组件。您真正需要的是输入中显示的文本。当您搜索新地址时，当然，您需要所有数据（纬度 lng 等）——但这已经在工作了。对于初始地址，您可能已经拥有此数据。这真的只是你在<input>这就是你所关心的。

<input>幸运的是，将 the 的行为与 the的行为分开真的很容易，StandaloneSearchBox因为<input>它只是一个您可以完全控制的子组件。

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

这是我的意思的粗略示例，使用您的代码：

  // init the state with your initial value "1 Something Street, etc"
  const [text, setText] = useState(INITIAL_VALUE_HERE)

  <StandaloneSearchBox
    ref={ props.onSearchBoxMounted }
    bounds={ props.bounds }
    // have onPlacesChanged set the state when a new option is picked
    // to whatever the address text of the selected place is
    // (needs to be implemented appropriately in onPlacesChanged of course)
    onPlacesChanged={() => { props.onPlacesChanged(setText) }}
  >
    <input
      className="form-control"
      placeholder={ props.placeholder }
      type="text"
      value={text} // control the input value with state
      onChange={(e) => { setText(e.target.value) }} // update the state when you type something
    />
  </StandaloneSearchBox>
于 2019-10-14T08:45:26.937 回答