如何在反应谷歌 map 中编辑多边形

Question

我正在使用功能组件在 React Js 中工作。 我在使用 react-google-maps/api 编辑多边形时遇到了麻烦。 我尝试了几种方法，但无法在右侧数组 object 的本地存储中编辑和存储值。 数组 object 的格式如下所示。 我怎么解决这个问题。 我认为这个想法很明确。 如果不清楚，请随时询问。

样本数组 object

[{
        "area": "Zone1",
        "cartamount": "",
        "extra_shippingamount": "",
        "polygon": [
            [{
                    "lat": 11.174036305817275,
                    "lng": 76.3754534171875
                },
                {
                    "lat": 10.526644973776667,
                    "lng": 76.6061663078125
                },
                {
                    "lat": 10.75339097376777,
                    "lng": 77.47957939375
                }
            ],
            [{
                    "lat": 11.28179683077826,
                    "lng": 75.89857811201172
                },
                {
                    "lat": 10.774977003245414,
                    "lng": 76.16774315107422
                },
                {
                    "lat": 11.292570666429365,
                    "lng": 76.91481346357422
                }
            ]
        ],
        "shippingamount": ""
    },
    {
        "area": "Zone2",
        "cartamount": "",
        "extra_shippingamount": "",
        "polygon": [
            [{
                    "lat": 11.174036305817275,
                    "lng": 76.3754534171875
                },
                {
                    "lat": 10.526644973776667,
                    "lng": 76.6061663078125
                },
                {
                    "lat": 10.75339097376777,
                    "lng": 77.47957939375
                }
            ]
        ],
        "shippingamount": ""
    },
    {
        "area": "Zone3",
        "cartamount": "",
        "extra_shippingamount": "",
        "polygon": [
             [{
                    "lat": 10.755303390976334,
                    "lng": 76.4073785765625
                },
                {
                    "lat": 10.182723497824039,
                    "lng": 76.4018854125
                },
                {
                    "lat": 10.150282003909208,
                    "lng": 77.3082574828125
                },
                {
                    "lat": 10.74990667635129,
                    "lng": 77.291777990625
                },
                {
                    "lat": 11.062755098084468,
                    "lng": 77.0445856078125
                }
            ]
        ],
        "shippingamount": ""
    }
]

代码

        import React, { Fragment, useEffect, useState, useRef, useCallback } from 'react';
        import { GoogleMap, DrawingManager,  Polygon} from "@react-google-maps/api";
        
        export const Map = () => {
        let mapZone =[]
        let getMapzone=  localStorage.getItem("mapZone")
        if (typeof getLocalCoordinates == 'string') {
              mapZone = JSON.parse(getLocalCoordinates);
             }
        
          const getPaths = (polygon: any, formik: any) => {
                var polygonCount = localCoordinates.length == 0 ? 1 : localCoordinates.length + 1
                var polygonBounds = polygon.getPath();
                var bounds = [];
                for (var i = 0; i < polygonBounds.length; i++) {
                    var point = {
                        lat: polygonBounds.getAt(i).lat(),
                        lng: polygonBounds.getAt(i).lng()
                    };
                    bounds.push(point);
                }
                formik?.values?.settings?.home_delivery_mapzones[coordIndex]?.polygon?.push(bounds)
                let getMapzones: any = localStorage.getItem("mapZone");
                if (typeof getMapzones == 'string') {
                    let localZone: any = JSON.parse(getMapzones);
                    localZone[coordIndex]?.polygon?.push(bounds?.map((item: any) => item));
                    localStorage.setItem('mapZone', JSON.stringify(localZone))
                }
            }
         
        const onEdit = useCallback(() => {
        
                if (polygonRef.current) {
                    // fecthed the cordinates of edited polygon
                    const nextPath = polygonRef?.current
                        .getPath()
                        .getArray()
                        .map((latLng: any) => {
                            return { lat: latLng.lat(), lng: latLng.lng() };
                        });
                    setPath(nextPath);
        
                    // code to store the value in local storage 
                    
                    let getMapzones = localStorage.getItem("mapZone");
                    // if (typeof getMapzones == 'string') {
                    //     let localZone = JSON.parse(getMapzones);
                    //     let tempData = localZone?.map((item: any, key: any) => {
                    //         if (key == coordIndex) {
                    //             return item?.polygon?.map((el: any, index: any) => {
                    //                 if (index == curIndex) {
                    //                     el = nextPath
                    //                     return el
                    //                 }
                    //                 else {
                    //                     return el
                    //                 }
                    //             })
        
                    //         }
                    //         else {
                    //             return item
                    //         }
                    //     })
                    //     localStorage.setItem('mapZone', JSON.stringify(tempData))
                    // }
                }
            }, [coordIndex, curIndex])
    
    const onLoad = useCallback(
            polygon => {
                polygonRef.current = polygon;
                const path = polygon.getPath();
                (listenersRef as any).current.push(
                    path.addListener("set_at", onEdit),
                    path.addListener("insert_at", onEdit),
                    path.addListener("remove_at", onEdit)
                );
            },
            [onEdit]
        );
        
        return(
    


                               <div className="p-col-12 p-md-9">
                                                                                {loading ? <div>Loading...</div> :
                                                                                    curLocation?.lat && curLocation?.lng &&
                                                                                    <GoogleMap
                                                                                        id="drawing-example"
                                                                                        mapContainerStyle={{ width: "100%", height: "400px" }}
                                                                                        mapTypeId="roadmap"
                                                                                        clickableIcons={true}
                                                                                        zoom={8}
                                                                                        center={{ lat: curLocation?.lat, lng: curLocation?.lng }}
                                                                                    >
                                                                                        <DrawingManager
                                                                                            drawingMode={google.maps.drawing.OverlayType.POLYGON}
                                                                                            onPolygonComplete={polygon => {
                                                                                                getPaths(polygon, formik);
                                                                                                polygon.setMap(null);
                                                                                            }}
                                                                                        />
                                                                                        {mapZone[coordIndex]?.polygon?.map((item: any, index: any) =>
                                                                                            < Polygon
                                                                                                path={item}
                                                                                                ref={polygonRef}
                                                                                                editable
                                                                                                draggable
                                                                                                onMouseUp={e => { setCurIndex(index); onEdit() }}
                                                                                                onDragEnd={e => { setCurIndex(index); onEdit() }}
                                                                                                onLoad={onLoad}
                                                                                            />
                                                                                        )}
                                                                                    </GoogleMap>
                                                                                }
    
                                                                            </div>
    
    }