时间戳

首页 > 解决方案 > 如何从 Google Map JavaScript 中删除多边形的单边

javascript - 如何从 Google Map JavaScript 中删除多边形的单边

问题描述

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();
    }
  }
);

我在谷歌地图中有多个多边形。我正在尝试使用mouseup事件来拖动和编辑多边形。我不希望我的多边形重叠。这就是为什么我使用insidePolygon如果当前多边形与任何其他多边形重叠则返回 true 的函数。因此，当函数返回 true 时，我使用path.removeAt(event.vertex)删除试图重叠的顶点。但是当我尝试拖动edge而不是vertex时，问题就开始了。然后path.removeAt(event.edge)即使两者都不起作用event.vertex并event.edge分别返回顶点和边的索引。有没有办法像我删除顶点一样删除边缘？

标签： javascriptgoogle-mapsgoogle-maps-api-3

解决方案

这对我有用，但是如果没有看到您向我们展示内容this.polygon和this.insidePolygon外观的完整代码，就很难诊断。

<!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>

推荐阅读