How to remove a single edge of a polygon from Google Map JavaScript
Question
window.google.maps.event.addListener(
this.poly, //currently selected polygon
"mouseup",
(event) => {
if (this.insidePolygon(event.latLng)) {
const path = this.poly.getPaths().getAt(event.path);
if (event?.vertex >= 0) { //returns true if vertex is being dragged
path.removeAt(event.vertex); // removes the current vertex
} else if (event?.edge >= 0) { //returns true if edge is being dragged
path.removeAt(event.edge); // does not remove the current edge
}
} else {
this.calcAreaAndLatlng();
}
}
);
I have multiple polygons inside google map. I am trying to use mouseup event to drag and edit a polygon. I do not want my polygons to overlap. That's why I am using insidePolygon function which returns true if current polygon overlaps any other polygons. So when the function returns true, I use path.removeAt(event.vertex) to remove the vertex that was trying to overlap. But the problem begins when I try to drag edge instead of vertex . Then the path.removeAt(event.edge) does not work even though both event.vertex and event.edge return the index of vertex and edge respectively. Is there any way to remove the edge like I removed the vertex?
1 answers
solution1
0 2021-06-20 09:58:53
This works for me, but without seeing your full code that shows us what this.polygon and this.insidePolygon look like, it's hard to diagnose.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style type="text/css">
html,body { height: 100%; margin: 0; padding: 0 }
#map { width:800px; height:640px }
</style>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var MapClass = class {
constructor() {
this.map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: {lat: 51.476706, lng: 0},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
drawPentagon() {
var coords = [
new google.maps.LatLng(51.474821, -0.001935),
new google.maps.LatLng(51.474647, 0.003966),
new google.maps.LatLng(51.477708, 0.004073),
new google.maps.LatLng(51.479753, 0.000468),
new google.maps.LatLng(51.477654, -0.002192)
];
this.poly = new google.maps.Polygon({
paths: coords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 10,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: this.map,
draggable: true,
editable: true
});
}
addEventListeners() {
window.google.maps.event.addListener(
this.poly,
"mouseup",
(event) => {
if (this.insidePolygon(event.latLng)) {
const path = this.poly.getPaths().getAt(event.path);
if (event?.vertex >= 0) { //returns true if vertex is being dragged
path.removeAt(event.vertex); // removes the current vertex
} else if (event?.edge >= 0) { //returns true if edge is being dragged
path.removeAt(event.edge); // does not remove the current edge
}
} else {
this.calcAreaAndLatlng();
}
}
);
}
insidePolygon(latLng) {
console.log('insidePolygon', latLng);
return true;
}
calcAreaAndLatlng() {
console.log('calcAreaAndLatlng');
}
};
function initialize() {
var map = new MapClass();
map.drawPentagon();
map.addEventListeners();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.