创建 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 创建标记,如下所示:
<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>
);
}
}
现在我想连同标记一起渲染一个 圆 但仅针对特定标记,例如第一个位置:
{
"id": 1,
"name": "Park Slope",
"latitude": "40.6710729",
"longitude": "-73.9988001"
},
如下所示:
是否支持通过react-google-maps渲染和画圆,并指定半径等属性?
由于标记属性是通过 places
属性传递的,因此要考虑的一种选择是将圆属性与地点数据一起传递,例如:
const places = [
{
id: 1,
name: "Park Slope",
latitude: "40.6710729",
longitude: "-73.9988001",
circle: {
radius: 3000,
options: {
strokeColor: "#ff0000"
}
}
},
...
]
然后渲染标记和圆 Map
组件可以这样修改:
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>
);
}
}
鉴于以下数据:
[
{
"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 创建标记,如下所示:
<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>
);
}
}
现在我想连同标记一起渲染一个 圆 但仅针对特定标记,例如第一个位置:
{
"id": 1,
"name": "Park Slope",
"latitude": "40.6710729",
"longitude": "-73.9988001"
},
如下所示:
是否支持通过react-google-maps渲染和画圆,并指定半径等属性?
由于标记属性是通过 places
属性传递的,因此要考虑的一种选择是将圆属性与地点数据一起传递,例如:
const places = [
{
id: 1,
name: "Park Slope",
latitude: "40.6710729",
longitude: "-73.9988001",
circle: {
radius: 3000,
options: {
strokeColor: "#ff0000"
}
}
},
...
]
然后渲染标记和圆 Map
组件可以这样修改:
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>
);
}
}