Question

我想在Google地图上放置半径圆。我已经检查过Google Maps api文档，但仍然不知道该怎么做。

这是我的代码：

 const MyMapComponent = compose(
          withProps({
            googleMapURL: googleMapsApiKey,
            loadingElement: <div style={mapConfigStyle.loadingElement} />,
            containerElement: <div style={mapConfigStyle.containerElement} />,
            mapElement: <div style={mapConfigStyle.mapElement} />
          }),
          withScriptjs,
          withGoogleMap,
        )(props => (
          <GoogleMap
            defaultZoom={12} 
            defaultCenter={{ lat: Number(this.state.latitude), lng: Number(this.state.longitude) }}

          >
         <Circle
          radius={1900}
          fillColor="#2a5777"
          center={{ lat: Number(this.state.latitude), lng: Number(this.state.longitude) }}
        />
            {props.isMarkerShown && (
              <Marker position={{ lat: Number(this.state.latitude), lng: Number(this.state.longitude) }} options={{ icon: { url: '/boost_marker.png' } }} />
            )}
          </GoogleMap>

Answer 1

<Circle
    defaultCenter={{
        lat: mapPosition.lat,
        lng: mapPosition.lng
    }}
    options={{fillColor:"#2a5777"}}                    
    radius={}
/>

将fillColor放入这样的选项中

Answer 2

这对我有用

const options = {
        fillColor: color,
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 0.1,
        fillOpacity: 0.35,
        clickable: false,
        draggable: false,
        editable: false,
        visible: true,
        zIndex: 1
}

<Circle
    key={id}
    radius={1000}
    center={{
        lat: latitude,
        lng: longitude
    }}
    options={options}
/>

如何在Google地图上更改圆半径的颜色

2 个答案: