Добавление и удаление нескольких полигонов в Картах Google с помощью React - правильные ссылки - PullRequest
Новая
       27

Добавление и удаление нескольких полигонов в Картах Google с помощью React - правильные ссылки

0 голосов
/ 04 февраля 2020

Я использую google-map-реагировать (не реагирует- google-maps) и могу вставлять полигоны, вызывая функцию polygonDraw в моем основном компоненте (не используя DrawingManager). Мою функцию polygonDraw можно увидеть ниже.

Я могу немедленно удалить самый новый многоугольник, добавив polygon.setMap (null) внутри моей функции polygonDraw.

Но вот проблема: Я не могу удалить ранее добавленные полигоны или все полигоны. Мне нужно иметь возможность удалять все многоугольники и делать это независимо от обработчиков событий (как событие щелчка на многоугольнике).

Я пробовал разные подходы, но не имел успешной реализации, включая: Я не могу создать компонент Polygon, который отображает новые объекты google.maps.Polygon ({. Et c.}) (На основе состояния / реквизитов).

Как я могу вставить Полигоны с моей функцией polygonDraw В настоящее время я думаю о стратегии так: устанавливает sh ссылку для каждого добавленного многоугольника. Я пытался реализовать ссылки React, включая ссылки на обратный вызов и использование React.createRef. Но безуспешно. Мой polygonDraw находится внутри основного компонента, но вне рендера. Я не могу понять, возможно ли установить sh и сохранить ссылку на каждый добавленный многоугольник, поэтому для каждого можно вызвать reference.setMap (null). И если это возможно, я не знаю, как установить sh ссылку (код внутри конструктора ?, код внутри polygonDraw ?, код внутри рендеринга, включая GoogleMapReact?)

Любая помощь / совет приветствуется: - ) 


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

1 Ответ

0 голосов
/ 04 февраля 2020

Не знаю, касается ли это проблем с производительностью, но как насчет сохранения полигонов в массив. 

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

}

После этого вы можете просто отфильтровать массив полигонов и удалить нужные вам полигоны. , Я не знаю, будет ли это решение работать, но вы можете попробовать его:)

...