如何使用道具更新多边形选项的填充颜色？答案

【问题标题】：How to update fillColor of polygonOptions with props?如何使用道具更新多边形选项的填充颜色？
【发布时间】：2020-06-19 07:04:08
【问题描述】：

我正在使用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>
  )
}

【问题讨论】：

你是如何在渲染中使用这个组件的？只需将颜色作为道具传递
@cura 我不认为您可以在创建形状后更改形状的颜色，但您可以更改用户创建的每个新形状的颜色。你想达到什么目标？更改现有形状颜色或新形状？
解释你为每个多边形添加特殊颜色作为变量的含义或解释更多？

标签： reactjs google-map-react

【解决方案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>
        )
    }
     }

【讨论】：

【解决方案2】：

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

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

【讨论】：