使用 React 在 Google 地图中添加和删除多个多边形 - 正确使用 Refs

Question

我正在使用 google-map-react（不是 react-google-maps），并且能够通过在我的主要组件中调用函数 polygonDraw 来插入多边形（不使用 drawingManager ).我的函数 polygonDraw 可以在下面看到。

我可以通过在 polygonDraw 函数中添加 polygon.setMap(null) 来立即删除最新的多边形。

但问题是： 我无法删除之前添加的多边形或所有多边形。我的需要是能够删除所有多边形并在不依赖事件处理程序的情况下执行此操作（就像多边形上的点击事件）。

我尝试了不同的方法，但没有成功实施，包括：我无法构建呈现新 google.maps.Polygon({.etc.}) 对象（基于 state/props）的多边形组件。

因为我能够使用 polygonDraw 函数插入多边形，所以我目前的策略想法是： 为每个添加的多边形建立引用。 我尝试实现 React 引用，包括回调引用并使用 React.createRef。但没有成功。我的 polygonDraw 在主要组件内部，但在渲染外部。我不知道是否可以建立和存储对每个添加的多边形的引用，因此可以为每个多边形调用 reference.setMap(null) 。如果可能的话，我不知道如何建立引用（构造函数内的代码？polygonDraw 内的代码？渲染器内的代码，包括 GoogleMapReact？）

感谢任何 help/advice :-)


    polygonDraw = () => {

        let polygonCoords = [{lat: this.state.lat, lng: this.state.lng}, {.etc.}, {.etc.}]

        const polygon = new google.maps.Polygon({
          paths: [polygonCoords],
          fillColor: 'rgb(255, 215, 0)',
        });

        polygon.setMap(this.state.map.map);
    }

    render() {
        return (
              <GoogleMapReact
                .etc.
              ></GoogleMapReact>
    )}

Answer 1

我不知道它是否减少了性能问题，但是如何将多边形保存到数组中。

// You have to create a store (eventually in the state?)
const polygons = [];

polygonDraw = () => {

    let polygonCoords = [{lat: this.state.lat, lng: this.state.lng}, {.etc.}, {.etc.}]

    const polygon = new google.maps.Polygon({
      paths: [polygonCoords],
      fillColor: 'rgb(255, 215, 0)',
    });

    polygon.setMap(this.state.map.map);

    // Then use this to save it to the polygons
    polygons.push(polygon);
    // OR this if you want
    polygons.push({identifyer: "foo", polygon});

}

之后您可以过滤多边形数组并删除您需要的多边形。我不知道这个解决方案是否有效，但你可以试一试:)

使用 React 在 Google 地图中添加和删除多个多边形 - 正确使用 Refs

Adding and Deleting Multiple Polygons in Google Maps with React - Getting Refs Right

google-maps

polygon

reactjs

react-ref