我正在使用函数式组件在 React Js 中工作。我在使用 react-google-maps/api 编辑多边形时遇到了麻烦。我尝试了几种方法，但无法在正确的数组对象中编辑和存储本地存储中的值。数组对象的格式如下。我怎么解决这个问题。我认为这个想法很清楚。有不清楚的地方欢迎提问。
示例数组对象
[{
"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>
}