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

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

Answer 2

    func sortHomeworks() {
    /*
     Sorts homeworks by date
     */
    // First it groups them into a dictionary
    let groupedHomeworks = Dictionary(grouping: recivedHomeworks) { (element) -> Date in
        return element.date!
    }
    // Then it sorts the keys in this new dictionary in reverse order
    let sortedKeys = groupedHomeworks.keys.sorted{$0 > $1} //ReverseSorting
    // add every [Homework] into --> homeworks [[Homework]]
    sortedKeys.forEach { (key) in
        let values = groupedHomeworks[key]
        homeworks.append(values ?? [])
    }

Answer 3

我在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)

如何用道具更新polygonOptions的fillColor？

3 个答案: