Javascript 如何使用谷歌地图从两个不同的搜索框中获取格式化的_地址？

我想在React中从同一谷歌地图中的两个不同搜索框中获取格式化的_数据。 我正在使用谷歌地图库。我不知道该怎么做，也没有在整个互联网上找到任何关于它的信息

我没有忘记更改api密钥

我已从文档中将此代码复制到我的项目中。但代码如下：

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 />
      );

const=require（“lodash”）；
const{compose，withProps，lifecycle}=require（“重新组合”）；
常数{
用ScriptJS，
用谷歌地图，
谷歌地图，
标记，
}=要求（“反应谷歌地图”）；
const{SearchBox}=require（“react google maps/lib/components/places/SearchBox”）；
常量MapWithASearchBox=compose(
用道具({
谷歌地图网址：https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&v=3.exp&libraries=geometry，drawing，places“，
加载元素：，
集装箱运输：，
mapElement:，
}),
生命周期({
组件willmount（）{
常量引用={}
这是我的国家({
界限：空，
中心：{
lat:41.9，液化天然气：-87.624
},
标记：[]，
onMapMounted:ref=>{
refs.map=ref；
},
onBoundsChanged:（）=>{
这是我的国家({
边界：refs.map.getBounds（），
中心：refs.map.getCenter（），
})
},
onSearchBoxMounted:ref=>{
refs.searchBox=ref；
},
onPlacesChanged:（）=>{
const places=refs.searchBox.getPlaces（）；
//这是我需要的信息，但我也需要第二个搜索框中的信息
console.log（位置[0]。格式化的\u地址）；
const bounds=new window.google.maps.LatLngBounds（）；
places.forEach（place=>{
if（place.geometry.viewport）{
bounds.union（place.geometry.viewport）
}否则{
扩展（place.geometry.location）
}
});
const nextMarkers=places.map（place=>({
位置：place.geometry.location，
}));
const nextCenter=u.get（nextMarkers'0.position'，this.state.center）；
这是我的国家({
中心：nextCenter，
markers:nextMarkers，
});
//参考地图fitBounds（bounds）；
},
})
},
}),
用ScriptJS，
用谷歌地图
)（道具=>
{props.markers.map（（marker，index）=>
)}
);
返回(
);

您正在覆盖此处的搜索框引用：

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

这就是为什么你只看到第二个搜索框。您可以创建一个数组，如下所示：

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

因此，您可以执行以下操作：

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

onPlacesChanged:（）=>{
让places=[]；
for（设i=0；i

---

现在，如果您登录

places

，您将看到每个搜索框的位置信息。我刚刚测试了我的这一点，它的工作没有问题，所以我希望这有助于你

您正在覆盖此处的SearchBox引用：

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

这就是为什么你只看到第二个搜索框。您可以创建一个数组，如下所示：

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

因此，您可以执行以下操作：

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

onPlacesChanged:（）=>{
让places=[]；
for（设i=0；i

现在，如果您登录

places

，您将看到每个搜索框的位置信息。我刚刚测试了我的这一点，它的工作没有问题，所以我希望这有助于你