[英]How to edit existing polygon using react-google-maps using react js
In that, I add polygon using drawing manager after that I want to edit that polygon.在那之后,我使用绘图管理器添加多边形,然后我想编辑该多边形。 When I use the below code, getting the function not found error and getPath function is not working when I use that getting errors.
当我使用下面的代码时,得到 function not found 错误和 getPath function 在我使用该错误时不起作用。 I want to add a city with location but in that code it not working.
我想添加一个带有位置的城市,但在该代码中它不起作用。 When I use the getPath function and editable function it getting errors.
当我使用 getPath function 和可编辑的 function 时出现错误。
import { compose, withProps } from "recompose";
import {
withGoogleMap,
GoogleMap,
withScriptjs,
Polygon,
} from "react-google-maps";
const {
DrawingManager,
} = require("react-google-maps/lib/components/drawing/DrawingManager");
var polygon = [];
const onAdd = (data) => {
const path = data.getPath();
var coordinates = [];
for (var i = 0; i < path.length; i++) {
var pathArray = [path.getAt(i).lat(), path.getAt(i).lng()];
coordinates.push(pathArray);
}
polygon = JSON.stringify(coordinates, null, 6);
};
const onEdit = (data) => {
var pathArray = [data.latLng.lat(), data.latLng.lng()];
console.log("edit path", pathArray);
console.log("poly", polygonPath);
polygonPath.push(pathArray);
};
const onDragEnd = (data) => {
const path = data.getPath();
var coordinates = [];
for (var i = 0; i < path.length; i++) {
var pathArray = [path.getAt(i).lat(), path.getAt(i).lng()];
coordinates.push(pathArray);
}
console.log("polygon", JSON.stringify(coordinates, null, 6));
};
let polygonPath = [];
const MyMapComponent = compose(
withProps({
googleMapURL:
"https://maps.googleapis.com/maps/api/js?key=" +
global.config.googleApiKey +
"&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `500px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
withGoogleMap
)((props) => {
let addPolygonPath = [];
if (props.isEdit) {
polygonPath = props.isEdit.geometry.coordinates[0];
addPolygonPath = props.isEdit.geometry.coordinates[0].map(
(coordinateItem) => {
return { lat: coordinateItem[0], lng: coordinateItem[1] };
}
);
}
return (
<GoogleMap defaultZoom={12} center={props.mapCenter}>
{props.isEdit ? (
<Polygon
editable={true}
draggable={true}
paths={addPolygonPath}
options={{
strokeWeight: 2,
fillColor: "#000",
fillOpacity: 0.4,
zIndex: 1,
}}
onMouseUp={onEdit}
onDragEnd={onDragEnd}
/>
) : (
<DrawingManager
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
drawingModes: ["polygon"],
},
polygonOptions: {
strokeWeight: 2,
fillColor: "#000",
fillOpacity: 0.4,
clickable: true,
editable: true,
zIndex: 1,
},
}}
onPolygonComplete={onAdd}
/>
)}
</GoogleMap>
);
});
You can use the onLoad
prop on your Polygon
component to get a reference to the polygon object.您可以在
Polygon
组件上使用onLoad
属性来获取对多边形 object 的引用。 Then save that reference in your state.然后将该参考保存在您的 state 中。
You can now use it to update your Polygon after each edit.您现在可以在每次编辑后使用它来更新您的多边形。
Like this:像这样:
export default function Map () {
const [polygon, setPolygon] = React.useState(null);
const [polygonRef, setPolygonRef] = React.useState(null);
// Util to create a polygon with options
function createPolygon (path) {
const polygon = new window.google.maps.Polygon({
path: path,
fillColor: "#D43AAC",
strokeColor: "#EB807E",
fillOpacity: 0.2,
strokeWeight: 5,
editable: true,
clickable: true,
});
return polygon;
};
// When first drawing is complete and edit has been made, this function is run
const onPolygonComplete = (polygon, destroy=false) => {
setPolygon(createPolygon(polygon.getPath()));
// Destroys the polygon that has been drawn by the manager.
if(destroy) {
polygon.setMap(null);
}
};
// Set the ref
const onPolygonLoad = (polygon) => setPolygonRef(polygon);
// Update the polygon
const onPolygonMouseUp = () => onPolygonComplete(polygonRef);
const polygonProps = polygon
? {
path: polygon.latLngs.i[0].i,
editable: polygon.editable,
clickable: polygon.clickable,
options: {
fillOpacity: polygon.fillOpacity,
strokeWeight: polygon.strokeWeight,
},
}
: null;
return (
<GoogleMap>
{/* Map components */}
{polygon ? (
<Polygon
{...polygonProps}
onLoad={onPolygonLoad}
onMouseUp={onPolygonMouseUp}
/>
) : (
<DrawingManager
drawingMode={"polygon"}
onPolygonComplete={(polygon) => onPolygonComplete(polygon, true)}
/>
)}
</GoogleMap>
);
};
Hope this helps.希望这可以帮助。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.