如何从 react-google-map 获取多边形的路径？

Question

下面是我的代码：

const SiteGoogleMap = compose(
withProps({
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}&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={18}
defaultCenter={{ lat: 3.1314067, lng: 101.6285082 }}
>
{props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} onClick={props.onMarkerClick} />}

<DrawingManager
  defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
  defaultOptions={{
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON
      ],
    }
  }}
  onPolygonComplete={(value) => console.log(getPaths())}
/>
</GoogleMap>

我正在尝试绘制多边形的路径，这将为我提供路径的坐标。但它在console.log 上给出了未定义的。你们知道为什么吗？

Answer 1

由于onPolygonComplete事件映射到DrawingManager类的polygoncomplete，所以value参数代表Polygon对象：

onPolygonComplete={(value) => console.log(getPaths())}
                    ^^^^^
                    polygon object  

可以传递给getPaths函数：

onPolygonComplete={(value) => console.log(getPaths(value))}  

然后绘制的多边形的坐标可以这样打印：

function getPaths(polygon){
  var coordinates = (polygon.getPath().getArray());
  console.log(coordinates);
}