首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

  1. 首先,确保你已经在React项目中安装了react-google-SearchBoxes库。可以使用以下命令进行安装:
代码语言:txt
复制
npm install react-google-SearchBoxes
  1. 在你的React组件中,导入所需的库和组件:
代码语言:txt
复制
import React from 'react';
import { GoogleMap, LoadScript, StandaloneSearchBox } from '@react-google-maps/api';
  1. 在组件中创建两个地图,并分别设置它们的中心点和缩放级别:
代码语言:txt
复制
const map1Options = {
  center: { lat: 40.712776, lng: -74.005974 },
  zoom: 10
};

const map2Options = {
  center: { lat: 34.052235, lng: -118.243683 },
  zoom: 10
};
  1. 在组件的render方法中,使用LoadScript组件加载Google Maps JavaScript API,并在回调函数中渲染地图和SearchBox组件:
代码语言:txt
复制
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>
  );
}
  1. 在组件中定义onLoadMap1SearchBox和onLoadMap2SearchBox方法,用于获取SearchBox组件的引用:
代码语言:txt
复制
onLoadMap1SearchBox = (ref) => {
  this.map1SearchBox = ref;
}

onLoadMap2SearchBox = (ref) => {
  this.map2SearchBox = ref;
}
  1. 在组件中定义onMap1PlacesChanged和onMap2PlacesChanged方法,用于获取选择的地点的formatted_address:
代码语言:txt
复制
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);
  }
}
  1. 最后,确保你替换YOUR_API_KEY为你的Google Maps JavaScript API密钥,并根据需要自定义样式和布局。

这样,当用户在两个地图中的SearchBox中搜索地点并选择后,你将能够获取到所选地点的formatted_address,并在控制台中打印出来。

请注意,以上代码示例中使用的是@react-google-maps/api库,你可以根据自己的需求选择其他适合的库或组件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券