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

Posted 2023-03-07

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

【英文标题】：How to fetch coordinates of Polygon in React.JS using react-google-maps

【发布时间】：2020-05-17 09:16:38

【问题描述】：

我想获取在 Google 地图上绘制的多边形的所有坐标。这是我的代码

import React from "react";
import  compose, withProps  from "recompose";
import 
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
 from "react-google-maps";
//import withScriptjs from "react-google-maps/lib/async/withScriptjs";
import  DrawingManager  from "react-google-maps/lib/components/drawing/DrawingManager";

const MyMapComponent = compose(
  withProps(
    /**
     * Note: create and replace your own key in the Google console.
     * https://console.developers.google.com/apis/dashboard
     * The key "AIzaSyBkNaAGLEVq0YLQMi-PYEMabFeREadYe1Q" can be ONLY used in this sandbox (no forked).
     */
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=AIzaSyALpmb4KhFoR2Kcvty21gzzegprl4ilIgs&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style= height: `100%`  />,
    containerElement: <div style= height: `400px`  />,
    mapElement: <div style= height: `100%`  />
  ),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap
    defaultZoom=8
    defaultCenter=new window.google.maps.LatLng(-34.397, 150.644)
  >
    <DrawingManager
      defaultDrawingMode=
        window.google.maps.drawing.OverlayType.ControlPosition
      
      defaultOptions=
        drawingControl: true,
        drawingControlOptions: 
          position: window.google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [
            window.google.maps.drawing.OverlayType.CIRCLE,
            window.google.maps.drawing.OverlayType.POLYGON,
            window.google.maps.drawing.OverlayType.POLYLINE,
            window.google.maps.drawing.OverlayType.RECTANGLE
          ]
        ,
        circleOptions: 
          fillColor: `#ffff00`,
          fillOpacity: 1,
          strokeWeight: 5,
          clickable: false,
          editable: true,
          zIndex: 1
        
      
    />
    props.isMarkerShown && (
      <Marker position= lat: -34.397, lng: 150.644  />
    )
  </GoogleMap>
));

我的工作重点是获取应该在 Google 地图上绘制的该多边形的所有坐标。我还想使用 mongoose 和 NodeJs 作为后端将这些坐标存储在 MongoDB 中。

【参考方案1】：

我们可以使用这个函数来获取多边形或任何其他反应角的所有坐标。

function getPaths(polygon) 

  var polygonBounds = polygon.getPath();
  var bounds = [];
  for (var i = 0; i < polygonBounds.length; i++) 
    var point = 
      lat: polygonBounds.getAt(i).lat(),
      lng: polygonBounds.getAt(i).lng()
    ;
    bounds.push(point);
  
  console.log(bounds);

在 GoogleMap 组件中，我通过给定的方式简化了上面的代码。

<DrawingManager
    drawingMode="polygon"
    onPolygonComplete=value => console.log(getPaths(value)) />