创建Google Maps Circle并在React中设置其半径 [英] Create Google Maps Circle and set its radius in React

问题描述

给出以下数据:

[
        {
            "id": 1,
            "name": "Park Slope",
            "latitude": "40.6710729",
            "longitude": "-73.9988001"
        },
        {
            "id": 2,
            "name": "Bushwick",
            "latitude": "40.6942861",
            "longitude": "-73.9389312"
        },
        {
            "id": 3,
            "name": "East New York",
            "latitude": "40.6577799",
            "longitude": "-73.9147716"
        }
    ]
]

我正在通过 react-google-maps 创建标记这个:

I'm creating markers via react-google-maps like this:

<Map
    center={{ lat: 40.64, lng: -73.96 }}
    zoom={12}
    places={data}
    googleMapURL="https://maps.googleapis.com/maps/api/js?key="
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `800px` }} />}
    mapElement={<div style={{ height: `100%` }} />}
  />

其中

class Map extends React.Component {
  render() {
    return (
      <GoogleMap
        defaultZoom={this.props.zoom}
        defaultCenter={this.props.center}
      >
        {this.props.places.map(place => {
          return (
            <Marker
              position={{
                lat: parseFloat(place.latitude),
                lng: parseFloat(place.longitude)
              }}
            />
          );
        })}
      </GoogleMap>
    );
  }
}

现在，我想与标记一起渲染一个圆，但仅针对特定标记，例如第一位置:

Now along with markers I would like to render a circle but only for a specific marker, for example for the first place:

{
    "id": 1,
    "name": "Park Slope",
    "latitude": "40.6710729",
    "longitude": "-73.9988001"
}, 

类似以下内容:

是否支持通过 react-google-maps 并指定半径等属性?

Is it supported to render and circle via react-google-maps and in addition to specify properties such as radius?

推荐答案

由于标记属性是通过places属性传递的，因此要考虑的一种选择是将圆属性与位置数据一起传递，例如:

Since markers properties are passed via places prop, one option to consider would be to pass circle properties along with places data, for example:

const places = [
  {
    id: 1,
    name: "Park Slope",
    latitude: "40.6710729",
    longitude: "-73.9988001",
    circle: {
      radius: 3000,
      options: {
        strokeColor: "#ff0000"
      }
    }
  },   
  ...
] 

然后可以将标记和圆圈Map组件一起渲染，如下所示:

Then to render markers along with a circles Map component could be modified like this:

class Map extends React.Component {
  render() {
    return (
      <GoogleMap
        defaultZoom={this.props.zoom}
        defaultCenter={this.props.center}
      >
        {this.props.places.map(place => {
          return (
            <Fragment key={place.id}>
              <Marker
                position={{
                  lat: parseFloat(place.latitude),
                  lng: parseFloat(place.longitude)
                }}
              />
              {place.circle && (
                <Circle
                  defaultCenter={{
                    lat: parseFloat(place.latitude),
                    lng: parseFloat(place.longitude)
                  }}
                  radius={place.circle.radius}
                  options={place.circle.options}
                />
              )}
            </Fragment>
          );
        })}
      </GoogleMap>
    );
  }
}

演示

这篇关于创建Google Maps Circle并在React中设置其半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！