如何使用react -google-map编辑现有多边形
如何使用react -google-map编辑现有多边形
提问于 2020-04-20 18:44:25
在这之后，我使用绘图管理器添加了多边形，然后我想要编辑该多边形。当我使用下面的代码时，获取函数未找到错误，而当我使用获取错误时，getPath函数不工作。我想添加一个城市的位置，但在该代码中它不工作。当我使用getPath函数和可编辑函数时，它得到了错误。
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>
);
});回答 1
Stack Overflow用户
发布于 2020-06-16 01:19:37
可以在Polygon组件上使用onLoad属性来获取对多边形对象的引用。然后在您的状态下保存该引用。
现在，您可以在每次编辑后使用它来更新多边形。
如下所示：
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>
);
};希望这能有所帮助。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61320561
复制相关文章
相似问题
腾讯云开发者
