谷歌地图回应多边形问题

Question

我正在创建一个应用程序，该应用程序使用API中的野火数据并翻转它，以便使用谷歌地图react包在谷歌地图上显示多边形。在返回并使用地图组件中内置的函数显示多边形之前，我已经解决了所有问题。有人想插话一下这个问题可能是什么吗？我真的很感激你的帮助。谢谢

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Polygon } from 'google-maps-react';

const mapStyles = {
margin: 30,
width: '93.75%',
height: '90%',
border: '1px solid #3E1C18',
display: 'inline-block'
};

class FireMap extends Component {
constructor(props) {
super(props)
this.state = {
fires: [],
polygons: []
}
}

componentDidMount() {
fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
.then(res => res.json())
.then(data => {
this.setState({ fires: data.features })
this.state.fires.map((fire) =>{
if (fire.geometry !== null){
let fireCoords = fire.geometry.rings
let trueCoords = []
fireCoords.map((coords) => {
coords.map((pair) => {
let newPair = {lat: pair[1], lng: pair[0]}
return trueCoords.push(newPair)
})
})
this.state.polygons.push(trueCoords);
console.log(this.state.polygons)
}
})
})
}
showPolygons = () => {
this.state.polygons.map((polygon) => {
let firePoly=  <Polygon paths={polygon} options={{
fillColor: "#BF5E4B",
fillOpacity: 0.45,
strokeColor: "#6B352A",
strokeOpacity: 0.9,
strokeWeight: 1
}}/>
return firePoly
})
}

render(){
return(
<div className="mapBox">
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 37.7749, lng: -122.4149 }}
>
{this.showPolygons()}
</Map>
</div>
);
}
}

Answer 1

如果你尝试了我建议的东西，我还没有从你的评论中发现。。。但是你已经用一些随机的(不正确的(修改编辑了你的帖子。好的，我试着发布一个答案。这是一个与原始代码相关的答案，因为它看起来更简单，包含的错误更少。

我认为它应该是这样的：

const coord_pair_to_latlng =  ([lat,lng]) => ({ lat, lng })
const convert_ring_coords = ring => ring.map(coord_pair_to_latlng)
class FireMap extends Component {
constructor(props) {
super(props)
this.state = { fires: [] }
}
componentDidMount() {
fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
.then(res => res.json())
.then(data => this.setState({ fires: data.features }))
}
displayFires = () => this.state.fires
.filter(fire => fire.geometry !== null)
.map(fire => fire.geometry.rings)
.map(rings => <Polygon 
paths = { rings.reduce((acc, ring) => acc.concat(convert_ring_coords(ring)), []) }
fillColor     = "#BF5E4B"
fillOpacity   = {0.45}
strokeColor   = "#6B352A"
strokeOpacity = {0.9}
strokeWeight  = {1}
/>)
render() {
return (
<div className="mapBox">
<Map
google        = {this.props.google}
zoom          = {8}
style         = {mapStyles}
initialCenter = {{ lat: 37.7749, lng: -122.4149 }}
>
{this.displayFires()}
</Map>
</div>
)
}
}

除了更实用的代码风格(你可以忽略它(，基本上我所改变的只是：

1. new Polygon()和<Polygon>不是一回事。你应该归还后者。JSX翻译成类似React.createElement(Polygon,...)的东西，而不是new Polygon(...)。好的，你已经解决了。

2. 根据文档和源代码，Polygon应创建为

   <Polygon
   paths         = {coords}
   fillColor     = "#BF5E4B"
   fillOpacity   = {0.45}
   strokeColor   = "#6B352A"
   strokeOpacity = {0.9}
   strokeWeight  = {1}
   />
   

   而不是

   <Polygon
   paths         = {coords}
   options       = {{...}}
   />
   

   您的options被忽略

3. componentDidMount中的this.displayFires()不起任何作用，因此应将其删除。

   ^{作为旁注：在this.displayFires()调用this.state时也没有更改。但这不应该改变结果，因为正如我所说，this.displayFires()对componentDidMount没有影响。。。但新版代码中的this.state.polygons.push可能会产生影响。。。或者我最好说会引入错误。你永远不应该那样做}