Получите подробную информацию обо всех маркерах, покрытых нарисованным многоугольником или любой другой формой, используя реагирование * 1000

Question

Я использую реаги- google-maps. Я создал карту и отобразил в ней 3 типа маркеров. Теперь я могу рисовать многоугольники на карте, но не могу отобразить детали маркеров под нарисованной формой. Любая помощь будет оценена.

Это мой код карты jsx. Я создаю 3 разных маркера с разными значками для идентификации на карте. Когда я рисую фигуру на карте, я хочу получить информацию о каждом виде маркера, который попадает под нарисованную фигуру.

import React from "react";
import DrawingManager from "react-google-maps/lib/components/drawing/DrawingManager";
import {GoogleMap, InfoWindow, Marker, withGoogleMap, withScriptjs} from "react-google-maps";
import UploadApis from "../../service/rest/upload";
import "./index.scss";

let selectedShape;

function clearSelection() {
    if (selectedShape) {
        if (selectedShape.type !== 'marker') {
            selectedShape.setEditable(false);
        }
        selectedShape = null;
    }
}

function setSelection(shape) {
    if (shape.type !== 'marker') {
        clearSelection();
        shape.setEditable(true);
    }
    selectedShape = shape;
}

class Map extends React.Component {
    constructor(props) {
        super(props);
        this.shapes = [];
        this.state = {
            fiberData: [],
            subscriberData: [],
            sitesData: [],
            fetchData: false,
            selected: null
        };
        this.handleOverlayComplete = this.handleOverlayComplete.bind(this);
        this.data();
    }

    handleOverlayComplete(e) {
        console.log("overlay",e);
        const newShape = e.overlay;
        newShape.type = e.type;

        if (e.type !== window.google.maps.drawing.OverlayType.MARKER) {
            window.google.maps.event.addListener(newShape, 'click', function (e) {
                if (e.vertex !== undefined) {
                    if (newShape.type === window.google.maps.drawing.OverlayType.POLYGON) {
                        let path = newShape.getPaths().getAt(e.path);
                        path.removeAt(e.vertex);
                        if (path.length < 3) {
                            newShape.setMap(null);
                        }
                    }
                    if (newShape.type === window.google.maps.drawing.OverlayType.POLYLINE) {
                        let path = newShape.getPath();
                        path.removeAt(e.vertex);
                        if (path.length < 2) {
                            newShape.setMap(null);
                        }
                    }
                }
                setSelection(newShape);
            });
            setSelection(newShape);
        } else {
            window.google.maps.event.addListener(newShape, 'click', function (e) {
                setSelection(newShape);
            });
            setSelection(newShape);
        }
        this.shapes.push(newShape);
    }


    data = async () => {
        let fiberData = await UploadApis.getMetaDataById("fiber",this.props.projectId);
        let sitesData = await UploadApis.getMetaDataById("sites",this.props.projectId);
        let subscriberData = await UploadApis.getMetaDataById("subscriber",this.props.projectId);

        this.setState({fiberData: fiberData, sitesData: sitesData, subscriberData: subscriberData, fetchData: true})
    };

    deleteSelectedShape = () => {
        if (selectedShape) {
            selectedShape.setMap(null);
        }
    };

    setSelected(selected) {
        this.setState({selected: selected})
    }

    render() {
        return (
            <div>
                <button className="btn-container" onClick={this.deleteSelectedShape}>Delete Shape
                </button>
                {this.state.fetchData ?
                    <div>
                        <GoogleMap
                            defaultZoom={6}
                            defaultCenter={{lat: 22.5106879, lng: 79.9189213}}
                        >
                            <DrawingManager
                                defaultDrawingMode={null}
                                defaultOptions={{
                                    drawingControl: true,
                                    drawingControlOptions: {
                                        position: window.google.maps.ControlPosition.TOP_CENTER,
                                        drawingModes: [ 'circle', 'polygon', 'polyline', 'rectangle']

                                    },
                                    polygonOptions: {editable: true},
                                    circleOptions: {editable: true},
                                    rectangleOptions: {editable: true},
                                    markerOptions: {editable: true},
                                    polylineOptions: {editable: true}
                                }}
                                onOverlayComplete={this.handleOverlayComplete}

                            />

                            {this.state.fiberData.map((fiber) => (
                                <Marker
                                    key={fiber.id}
                                    position={{lat: fiber.latitude, lng: fiber.longitude}}
                                    onClick={() => {
                                        this.setSelected(fiber);
                                    }}
                                    icon={{
                                        url: "../assets/svg/fiber.png",
                                        scaledSize: new window.google.maps.Size(25, 25)
                                    }}
                                />
                            ))}

                            {this.state.sitesData.map((site) => (
                                <Marker
                                    key={site.id}
                                    position={{lat: site.latitude, lng: site.longitude}}
                                    onClick={() => {
                                        this.setSelected(site);
                                    }}
                                    icon={{
                                        url: "../assets/svg/tower.png",
                                        scaledSize: new window.google.maps.Size(25, 25)
                                    }}
                                />
                            ))}

                            {this.state.subscriberData.map((subscriber) => (
                                <Marker
                                    key={subscriber.id}
                                    position={{lat: subscriber.latitude, lng: subscriber.longitude}}
                                    onClick={() => {
                                        this.setSelected(subscriber);
                                    }}
                                    icon={{
                                        url: "../assets/svg/subscriber.svg",
                                        scaledSize: new window.google.maps.Size(25, 25)
                                    }}
                                />
                            ))}

                            {this.state.selected && (
                                <InfoWindow
                                    position={{lat: this.state.selected.latitude, lng: this.state.selected.longitude}}
                                    onCloseClick={() => {
                                        this.setSelected(null);
                                    }}>
                                    <div>
                                        <h4>{this.state.selected.name}</h4>
                                        <p>{this.state.selected.description}</p>
                                    </div>
                                </InfoWindow>
                            )}
                        </GoogleMap>
                    </div> : null
                }
            </div>
        );
    }
}

export default withScriptjs(withGoogleMap(Map));

Это первый файл, который я вызвал. Индексный файл, который отображает карту -

import React from "react";
import Map from './map.jsx';

export default class MapContainer extends React.Component {
    _projectId="";

    constructor(props) {
        super(props);
        console.log(props);

        if(props.location.state.project){
            this._projectId = props.location.state.project.id;
        }
    }

    render() {
        return (
            <div>
                <Map
                    googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=API_KEY`}
                    loadingElement={<div style={{height: `100%`}}/>}
                    containerElement={<div style={{height: `480px`}}/>}
                    mapElement={<div style={{height: `100%`}}/>}
                    projectId ={this._projectId}
                />
            </div>
        );
    }
}```