如何使用 react-google-maps 从两个不同的 SearchBox 中获取 formatted_address？

Question

I want to get the formatted_data out of two different SearchBoxes in the same GoogleMap in React. I am using the react-google-maps library. I have no clue how to go about it and I haven't found any information about it on the entire internet.

I didn't forget to change my api key.

I have copied this code to my project from the documentation. But here is the code:

const _ = require("lodash");
        const { compose, withProps, lifecycle } = require("recompose");
        const {
        withScriptjs,
        withGoogleMap,
        GoogleMap,
        Marker,
        } = require("react-google-maps");
        const { SearchBox } = require("react-google-maps/lib/components/places/SearchBox");

        const MapWithASearchBox = compose(
        withProps({
            googleMapURL: "https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&v=3.exp&libraries=geometry,drawing,places",
            loadingElement: <div style={{ height: `100%` }} />,
            containerElement: <div style={{ height: `400px` }} />,
            mapElement: <div style={{ height: `100%` }} />,
        }),
        lifecycle({
            componentWillMount() {
            const refs = {}

            this.setState({
                bounds: null,
                center: {
                lat: 41.9, lng: -87.624
                },
                markers: [],
                onMapMounted: ref => {
                refs.map = ref;
                },
                onBoundsChanged: () => {
                this.setState({
                    bounds: refs.map.getBounds(),
                    center: refs.map.getCenter(),
                })
                },
                onSearchBoxMounted: ref => {
                refs.searchBox = ref;
                },
                onPlacesChanged: () => {
                const places = refs.searchBox.getPlaces();
                //this is the information that I need but I need it from the second SearchBox too
                console.log(places[0].formatted_address);
                const bounds = new window.google.maps.LatLngBounds();

                places.forEach(place => {
                    if (place.geometry.viewport) {
                    bounds.union(place.geometry.viewport)
                    } else {
                    bounds.extend(place.geometry.location)
                    }
                });
                const nextMarkers = places.map(place => ({
                    position: place.geometry.location,
                }));
                const nextCenter = _.get(nextMarkers, '0.position', this.state.center);

                this.setState({
                    center: nextCenter,
                    markers: nextMarkers,
                });
                // refs.map.fitBounds(bounds);
                },
            })
            },
        }),
        withScriptjs,
        withGoogleMap
        )(props =>
        <GoogleMap
            ref={props.onMapMounted}
            defaultZoom={15}
            center={props.center}
            onBoundsChanged={props.onBoundsChanged}
        >
            <SearchBox
            ref={props.onSearchBoxMounted}
            bounds={props.bounds}
            controlPosition={window.google.maps.ControlPosition.TOP_LEFT}
            onPlacesChanged={props.onPlacesChanged}
            >
            <input
                type="text"
                placeholder="Customized your placeholder"
                style={{
                boxSizing: `border-box`,
                border: `1px solid transparent`,
                width: `240px`,
                height: `32px`,
                marginTop: `27px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                textOverflow: `ellipses`,
                }}
            />
            </SearchBox>
            <SearchBox
            ref={props.onSearchBoxMounted}
            bounds={props.bounds}
            controlPosition={window.google.maps.ControlPosition.TOP_LEFT}
            onPlacesChanged={props.onPlacesChanged}
            >
            <input
                type="text"
                placeholder="Customized your placeholder"
                style={{
                boxSizing: `border-box`,
                border: `1px solid transparent`,
                width: `240px`,
                height: `32px`,
                marginTop: `27px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                textOverflow: `ellipses`,
                }}
            />
            </SearchBox>
            {props.markers.map((marker, index) =>
            <Marker key={index} position={marker.position} />
            )}
        </GoogleMap>
        );

      return (
        <MapWithASearchBox />
      );

Answer 1

You are overriding the SearchBox reference here:

    onSearchBoxMounted: ref => {
      refs.searchBox = ref;
    },

That's why you only see the second SearchBox. What you can do is create an array, like this:

    onSearchBoxMounted: ref => {
      if (!refs.searchBoxes || refs.searchBoxes.length === 0) {
        refs.searchBoxes = [];
      }
      refs.searchBoxes.push(ref);
    },

So that you can then do this:

    onPlacesChanged: () => {
      let places = [];
      for (let i = 0; i < refs.searchBoxes.length; i++) {
        places.push(refs.searchBoxes[i].getPlaces());
      }
      ...
    }

Now if you log places you'll see place information for each searchbox. I just tested this on my end and it works without problem so I hope this helps you!