问题描述
我正在使用函数式组件在 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","lng": 77.47957939375
}
]
],{
"area": "Zone3","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",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>
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）