Как обновить fillColor для polygonOptions с помощью реквизита?

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

 render() {
    const center = this.getvalue();
    const {area=[]} = this.props;
        console.log(this.props);

        return (
            <googlemap
                defaultzoom={14}
                center={center}
                onrightclick={this.erasepolygon}>
                {
                    this.state.bounds.length != 0 &&
                    <polygon
                        paths={this.state.bounds}
                        options={{
                        strokecolor:"#d34052",
                        fillcolor:"#d34052",
                        strokeopacity:"0.5",
                        strokeweight:'2'
                            }}
                    />

                }

                {
                    <drawingmanager
                        drawingmode={google.maps.drawing.overlaytype.polygon}
                        onpolygoncomplete={this.handleoverlay}

                        defaultoptions={{
                      drawingcontrol: true,
                      drawingcontroloptions: {
                        position: google.maps.controlposition.top_center,
                        drawingmodes:['polygon']

                      },
                      polygonoptions: {
                        fillcolor: `#ffffff`,
                        fillopacity: 0.7,
                        strokeweight: 1,
                        clickable: true,
                        editable: true,
                        zindex: 1
                      }
                    }}
                    />
                }
                <marker
                    position={center}
                />
                {

                    area.map((value, index) => {
                        return (
                            <polygon
                                key={index}
                                paths={value.bounds}
                                options={{
                        strokecolor:"#e34052",
                        fillcolor:"#e3352",
                        strokeopacity:"0.5",
                        strokeweight:'2'
                            }}

                            />
                        )

                    })
                }
            </googlemap>
        )
    }
     }

Answer 2

Я открываю вопрос в Github: https://github.com/tomchentw/react-google-maps/issues/1035#issuecomment -597227861

Я выбираю использовать другую библиотеку, имя @react-google-maps/api

Теперь я могу изменить мои реквизиты DrawingManager

Мой код:

Родитель:

   const onLoadDrawing = useCallback(
    (drawingManager) => {
      if (drawingManager) {
        drawingManager.setOptions({
          polygonOptions: {
            fillColor: values.cor,
            strokeColor: values.cor,
            ...polygonOptions,
          },
        })
      }
      setDrawingManager(drawingManager)
    },
    [setDrawingManager, values.cor],
  ) <
  GoogleMap mapContainerStyle = {
    mapStyle
  }
center = {
  center
}
zoom = {
  15
}
onLoad = {
    onLoad
  } > {
    loadingMap && !polygonComplete && ( <
      DrawingManager onPolygonComplete = {
        onPolygonComplete
      }
      onLoad = {
        onLoadDrawing
      }
      options = {
        {
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [google.maps.drawing.OverlayType.POLYGON],
          },

        }
      }
      />
    )
  } <
  /GoogleMap>

Дети

import React, {
  memo
} from 'react'
import {
  GoogleMap,
  useLoadScript,
  DrawingManager
} from '@react-google-maps/api'
import {
  Spin
} from 'antd'
import _ from 'lodash'

interface MapProps {
  mapContainerStyle: {}
  zoom: number
  center: {
    lat: number;lng: number
  }
  children ? : React.ReactElement[] | React.ReactElement | boolean
  onLoad ? : (map: google.maps.Map < Element > ) => void | Promise < void >
}

const Map: React.FC < MapProps > = ({
  mapContainerStyle,
  zoom,
  center,
  onLoad,
  children
}) => {
  return ( <
    GoogleMap id = "drawing-manager-example"
    mapTypeId = "satellite"
    mapContainerStyle = {
      mapContainerStyle
    }
    zoom = {
      zoom
    }
    center = {
      center
    }
    onLoad = {
      onLoad
    } > {
      children
    } <
    /GoogleMap>
  )
}

const libraries = ['drawing']

const GoogleMapComponent: React.FC < MapProps > = (props) => {
    const {
      isLoaded,
      loadError
    } = useLoadScript({
      id: 'script-google-map-loader',
      googleMapsApiKey: process.env.REACT_APP_PROVIDER_GOOGLE,
      libraries,
    })

    if (loadError) {
      return <div > Mapa não pode ser carregado neste momento, desculpe: ( < /div>
      }

      return isLoaded ? ( <
        Map {
          ...props
        }
        />
      ) : ( <
        div style = {
          {
            textAlign: 'center',
            background: 'rgba(0, 0, 0, 0.05)',
            borderRadius: 4,
            marginBottom: 20,
            padding: 30,
            margin: 20,
          }
        } >
        <
        Spin / >
        <
        /div>
      )
    }

    export default memo(GoogleMapComponent, _.isEqual)

Answer 3

У меня большой опыт работы с GIS + React, но я никогда не работал с Google API. Я бы покопался в вашей проблеме, и есть предложение: возможно, вы выбрали не ту библиотеку. Я прочитал исходный код, примеры "google-map-реакции" - он не поддерживается. Есть более популярные альтернативы, такие как https://github.com/fullstackreact/google-maps-react#polygon

Даже из примера вы узнаете, как изменить цвет полигона.