时间戳

首页 > 解决方案 > 如何在谷歌地图上更改圆半径的颜色

javascript - 如何在谷歌地图上更改圆半径的颜色

问题描述

我想把半径圆放在谷歌地图上。我已经检查了谷歌地图 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>

标签： javascriptreactjsgoogle-maps

解决方案

这对我有用 

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}
/>

推荐阅读