如何使用react-google-maps在React.JS中获取多边形的坐标

在React.JS中使用react-google-maps获取多边形的坐标可以通过以下步骤实现：

首先，确保你的React项目中已经安装了react-google-maps依赖。可以通过运行以下命令进行安装：

npm install react-google-maps

在你的React组件中引入所需的库：

import { withGoogleMap, GoogleMap, Polygon } from "react-google-maps";

在组件中定义一个状态来存储多边形的坐标。在构造函数中初始化多边形坐标数组：

constructor(props) {
  super(props);
  this.state = {
    polygonCoords: []
  };
}

在render方法中，将GoogleMap组件包裹在withGoogleMap高阶组件中，并设置相关属性：

render() {
  const MapWithPolygon = withGoogleMap(props => (
    <GoogleMap
      defaultCenter={{ lat: 0, lng: 0 }} // 设置地图的中心点
      defaultZoom={8} // 设置地图的缩放级别
    >
      <Polygon
        paths={this.state.polygonCoords} // 设置多边形的坐标路径
      />
    </GoogleMap>
  ));

  return (
    <div style={{ height: "400px", width: "100%" }}>
      <MapWithPolygon
        containerElement={<div style={{ height: "100%" }} />}
        mapElement={<div style={{ height: "100%" }} />}
      />
    </div>
  );
}

现在，你可以在组件中添加事件处理函数来获取多边形的坐标。例如，你可以在点击地图时将点击位置的坐标添加到多边形坐标数组中：

handleMapClick = (event) => {
  const clickedCoords = { lat: event.latLng.lat(), lng: event.latLng.lng() };
  this.setState(prevState => ({
    polygonCoords: [...prevState.polygonCoords, clickedCoords]
  }));
}

<GoogleMap
  ...
  onClick={this.handleMapClick} // 添加地图点击事件监听
>

现在，你就可以在React.JS中使用react-google-maps来获取多边形的坐标了。当用户点击地图时，多边形将会根据点击位置添加新的顶点坐标。你可以根据实际需求，进一步处理或存储这些坐标。

腾讯云提供了腾讯地图（https://lbs.qq.com/）相关的产品，可以用于地图应用的开发，包括定位、地图展示、路径规划等功能。你可以根据具体需求选择适合的腾讯云地图产品进行集成。