如何使用react-google- SearchBoxes从两个不同的地图中获取formatted_address？

使用react-google-SearchBoxes从两个不同的地图中获取formatted_address的步骤如下：

首先，确保你已经在React项目中安装了react-google-SearchBoxes库。可以使用以下命令进行安装：

npm install react-google-SearchBoxes

在你的React组件中，导入所需的库和组件：

import React from 'react';
import { GoogleMap, LoadScript, StandaloneSearchBox } from '@react-google-maps/api';

在组件中创建两个地图，并分别设置它们的中心点和缩放级别：

const map1Options = {
  center: { lat: 40.712776, lng: -74.005974 },
  zoom: 10
};

const map2Options = {
  center: { lat: 34.052235, lng: -118.243683 },
  zoom: 10
};

在组件的render方法中，使用LoadScript组件加载Google Maps JavaScript API，并在回调函数中渲染地图和SearchBox组件：

render() {
  return (
    <LoadScript
      googleMapsApiKey="YOUR_API_KEY"
      libraries={['places']}
    >
      <div>
        <h1>Map 1</h1>
        <GoogleMap
          mapContainerStyle={{ height: '400px', width: '100%' }}
          options={map1Options}
        >
          <StandaloneSearchBox
            onLoad={this.onLoadMap1SearchBox}
            onPlacesChanged={this.onMap1PlacesChanged}
          >
            <input
              type="text"
              placeholder="Search for location"
              style={{
                boxSizing: `border-box`,
                border: `1px solid transparent`,
                width: `240px`,
                height: `32px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                textOverflow: `ellipses`,
                position: "absolute",
                left: "50%",
                marginLeft: "-120px"
              }}
            />
          </StandaloneSearchBox>
        </GoogleMap>

        <h1>Map 2</h1>
        <GoogleMap
          mapContainerStyle={{ height: '400px', width: '100%' }}
          options={map2Options}
        >
          <StandaloneSearchBox
            onLoad={this.onLoadMap2SearchBox}
            onPlacesChanged={this.onMap2PlacesChanged}
          >
            <input
              type="text"
              placeholder="Search for location"
              style={{
                boxSizing: `border-box`,
                border: `1px solid transparent`,
                width: `240px`,
                height: `32px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                textOverflow: `ellipses`,
                position: "absolute",
                left: "50%",
                marginLeft: "-120px"
              }}
            />
          </StandaloneSearchBox>
        </GoogleMap>
      </div>
    </LoadScript>
  );
}

在组件中定义onLoadMap1SearchBox和onLoadMap2SearchBox方法，用于获取SearchBox组件的引用：

onLoadMap1SearchBox = (ref) => {
  this.map1SearchBox = ref;
}

onLoadMap2SearchBox = (ref) => {
  this.map2SearchBox = ref;
}

在组件中定义onMap1PlacesChanged和onMap2PlacesChanged方法，用于获取选择的地点的formatted_address：

onMap1PlacesChanged = () => {
  const places = this.map1SearchBox.getPlaces();
  if (places.length > 0) {
    const formattedAddress = places[0].formatted_address;
    console.log('Map 1 - Formatted Address:', formattedAddress);
  }
}

onMap2PlacesChanged = () => {
  const places = this.map2SearchBox.getPlaces();
  if (places.length > 0) {
    const formattedAddress = places[0].formatted_address;
    console.log('Map 2 - Formatted Address:', formattedAddress);
  }
}