如何使用道具更新polygonOptions的fillColor？

Question

我正在用DrawingManager. 我想fillColor用道具修改多边形。我该怎么办？

import React from 'react'
import GoogleMap from 'google-map-react'

export default (props: any) => {
  let {color} = props
  const handleGoogleMapApi = (google: any) => {
    console.log(google)
    var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: ['polygon'],
      },
      polygonOptions: {
        strokeWeight: 5,
        fillOpacity: 0.45,
        fillColor: color,
      },
    })
    google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon: any) => {
      let points: any = polygon.getPath().getArray()

      points.forEach((point: any) => {
        const {lat, lng} = point
        console.log(lat(), lng())
      })
    })
    google.map.setMapTypeId('satellite')
    drawingManager.setMap(google.map)
  }
  return (
    <div style={{height: '60%', width: '100%'}}>
      <GoogleMap
        defaultCenter={{lat: -19.810968444640704, lng: -43.54377112158203}}
        defaultZoom={15}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={handleGoogleMapApi}
        onChange={handleGoogleMapApi}
        bootstrapURLKeys={{libraries: 'drawing', key: `${process.env.REACT_APP_PROVIDER_GOOGLE}`}}
      />
    </div>
  )
}

Answer 1

我有很多使用 GIS + React 的经验，但从未使用过 google API。我会深入研究你的问题，并提出建议：可能你选择了错误的库。我已经阅读了源代码，“google-map-react”的示例 - 它缺乏维护。有更流行的替代方案，例如https://github.com/fullstackreact/google-maps-react#polygon

即使从示例中，您也会了解如何更改多边形的颜色。