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

npm install react-google-maps

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

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

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} // 添加地图点击事件监听
>