Google Maps React Polygon问题

问题描述

我正在创建一个使用来自API的野火数据并将其翻转的应用，以便使用google-maps-react包在Google Map上显示多边形。我已经弄清楚了一切，直到使用地图组件内置的函数返回并显示多边形。是否有人想知道这个问题可能是什么？我真的很感谢您的帮助。谢谢。

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>
        );
    }
}

解决方法

如果您尝试了我建议的操作，我不会从您的评论中发现问题。但是，您对帖子进行了一些随机（且不正确）的更改。好的，我将尝试发布答案。这是与原始代码相关的答案，因为它看起来更简单并且包含更少的错误。

这是我认为的样子：

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. 根据docs和source code ，应将Polygon创建为

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

   而不是

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

   您的options被忽略

this.displayFires()中的

3. componentDidMount无任何作用，因此应将其删除。

   ^{作为旁注：同样在this.displayFires()时致电this.state is not changed yet。但是它不应该改变结果，因为正如我说的那样，this.displayFires()在componentDidMount中没有任何作用...但是在新版本的代码中this.state.polygons.push可以有作用...或者我最好说会引入错误。您永远都不要这样做。}