微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Google 地图上的事件内多边形

分类：编程问答

如何解决Google 地图上的事件内多边形

我正在尝试创建一个实用程序，用户可以在其中在 polgon 中创建内孔。这段代码工作正常。但是我无法在拉伸或移动内环顶点时捕获事件。

如何制作： 使用处理程序创建多边形。 在多边形内绘制另一个多边形。 你会看到它是一个洞。

进一步选择多边形并拉伸该点。您将在拉伸外部多边形时收到警报。我希望内部多边形具有相同的行为（意思是说内部多边形上的触发事件也是如此）。我在这里做什么错了。请帮忙。

代码如下：

var selectedShape;
///Function for selecting a shape
function setSelection(shape) {
  clearSelection();
  selectedShape = shape;
  shape.setEditable(true);
}

//Clear the selection of a polygon.
function clearSelection() {
  if (selectedShape) {
    selectedShape.setEditable(false);
    selectedShape = null;
  }
}

//Check if polygon is inside polygon****
function ispolygonInsidepolygon(innerpolygon,outerpolygon) {
    var points = innerpolygon.getPath().getArray();

    for (var i = 0; i < points.length; i++) {
      if (!google.maps.geometry.poly.containsLocation(points[i],outerpolygon)) {
        return false;
      }
    }
    return true;
  }

//Rewind Co-ords for Creating Hole
  function rewindRing(ring,dir) {
    var area = 0;
    for (var i = 0,len = ring.length,j = len - 1; i < len; j = i++) {
      area += ((ring[i].lng() - ring[j].lng()) * (ring[j].lat() + ring[i].lat()));
    }
    
    if (area >= 0 !== !dir)
      ring.reverse();
    return ring;
  }

function initialize() {
    var overlayArr=[];
    var map = new google.maps.Map(document.getElementById('polymap'),{
    zoom: 14,center: new google.maps.LatLng(28.631162,77.213313),mapTypeId: google.maps.MapTypeId.ROADMAP,disableDefaultUI: true,zoomControl: true,fullscreenControl: true
    });

    var polyOptions = {
    strokeWeight: 0,fillOpacity: 0.45,editable: true
    };


      // Creates a drawing manager attached to the map that allows the user to draw
      // markers,lines,and shapes.
    drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.polyGON,drawingControlOptions: {
    drawingModes: [google.maps.drawing.OverlayType.polyGON]
    },markerOptions: {
    draggable: true
    },polylineoptions: {
    editable: true
    },rectangleOptions: polyOptions,circleOptions: polyOptions,polygonoptions: polyOptions,map: map
    });


    google.maps.event.addListener(drawingManager,'overlaycomplete',function(e) {
    if (e.type != google.maps.drawing.OverlayType.MARKER) {

        //New Addition
        var path = e.overlay.getPath().getArray()
        path = rewindRing(path,true);
        newpoly = new google.maps.polygon({
        path: path,})
        var found = false;
        for (var i = 0; i < overlayArr.length; i++) {
          if (ispolygonInsidepolygon(e.overlay,overlayArr[i])) {
            found = true;
            var path = e.overlay.getPath().getArray();
            path = rewindRing(path,false);
            overlayArr[i].getPaths().push(new google.maps.MVCArray(path));
            e.overlay.setMap(null);
            break;
          }
        }
         if(!found) {
          overlayArr.push(e.overlay);
        }

        var newShape = e.overlay;
        newShape.type = e.type;
        google.maps.event.addListener(newShape,'click',function() {setSelection(newShape);});
        }
        setSelection(newShape);
    });

    google.maps.event.addListener(drawingManager,'polygoncomplete',function (polygon) {
        for (var i = 0; i < selectedShape.getPaths().getLength(); i++) {
                google.maps.event.addListener(selectedShape.getPaths().getAt(i),'set_at',function() {
                alert("complete called");
                });
                google.maps.event.addListener(selectedShape.getPaths().getAt(i),'dragend','insert_at','remove_at',function() {
                alert("complete called");
                });
                }
            });
}
<div id="polymap" style="height:300px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIc-PhM9_Uwpjbks0WPvtkKYagOXTk12A&libraries=drawing&callback=initialize&" async defer></script>

解决方法

您需要将 insert_at、remove_at 和 set_at 事件侦听器添加到内部路径 将其添加到外部多边形之后。

相关问题：

在代码决定将其添加到外部多边形的地方，添加内部路径的事件侦听器（在这种情况下，它只会添加一个新路径）：

if (isPolygonInsidePolygon(e.overlay,overlayArr[i])) {
  found = true;
  var path = e.overlay.getPath().getArray();
  path = rewindRing(path,false);
  var newPathIdx = overlayArr[i].getPaths().getLength(); // index of added path
  overlayArr[i].getPaths().push(new google.maps.MVCArray(path));
  e.overlay.setMap(null);
              
  google.maps.event.addListener(selectedShape.getPaths().getAt(newPathIdx),'set_at',function() {
    alert("inner path set_at called");
  });
  google.maps.event.addListener(selectedShape.getPaths().getAt(newPathIdx),'insert_at',function() {
    alert("inner path insert_at called");
  });
  google.maps.event.addListener(selectedShape.getPaths().getAt(newPathIdx),'remove_at',function() {
    alert("inner path remove_at called");
  });
  break;
}

更新的代码片段： 

var selectedShape;
///Function for selecting a shape
function setSelection(shape) {
  clearSelection();
  selectedShape = shape;
  shape.setEditable(true);
}

//Clear the selection of a polygon.
function clearSelection() {
  if (selectedShape) {
    selectedShape.setEditable(false);
    selectedShape = null;
  }
}

//Check if Polygon is inside Polygon****
function isPolygonInsidePolygon(innerPolygon,outerPolygon) {
  var points = innerPolygon.getPath().getArray();

  for (var i = 0; i < points.length; i++) {
    if (!google.maps.geometry.poly.containsLocation(points[i],outerPolygon)) {
      return false;
    }
  }
  return true;
}

//Rewind Co-ords for Creating Hole
function rewindRing(ring,dir) {
  var area = 0;
  for (var i = 0,len = ring.length,j = len - 1; i < len; j = i++) {
    area += ((ring[i].lng() - ring[j].lng()) * (ring[j].lat() + ring[i].lat()));
  }

  if (area >= 0 !== !dir)
    ring.reverse();
  return ring;
}

function initialize() {
  var overlayArr = [];
  var map = new google.maps.Map(document.getElementById('polymap'),{
    zoom: 14,center: new google.maps.LatLng(28.631162,77.213313),mapTypeId: google.maps.MapTypeId.ROADMAP,disableDefaultUI: true,zoomControl: true,fullscreenControl: true
  });

  var polyOptions = {
    strokeWeight: 0,fillOpacity: 0.45,editable: true
  };


  // Creates a drawing manager attached to the map that allows the user to draw
  // markers,lines,and shapes.
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,drawingControlOptions: {
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },markerOptions: {
      draggable: true
    },polylineOptions: {
      editable: true
    },rectangleOptions: polyOptions,circleOptions: polyOptions,polygonOptions: polyOptions,map: map
  });


  google.maps.event.addListener(drawingManager,'overlaycomplete',function(e) {
    if (e.type != google.maps.drawing.OverlayType.MARKER) {

      //New Addition
      var path = e.overlay.getPath().getArray()
      path = rewindRing(path,true);
      newPoly = new google.maps.Polygon({
        path: path,})
      var found = false;
      for (var i = 0; i < overlayArr.length; i++) {
        if (isPolygonInsidePolygon(e.overlay,overlayArr[i])) {
          found = true;
          var path = e.overlay.getPath().getArray();
          path = rewindRing(path,false);
          var newPathIdx = overlayArr[i].getPaths().getLength();
          overlayArr[i].getPaths().push(new google.maps.MVCArray(path));
          e.overlay.setMap(null);
          console.log("isPolygonInsidePolygon,paths=" + overlayArr[i].getPaths().getLength());
          google.maps.event.addListener(selectedShape.getPaths().getAt(newPathIdx),function() {
            alert("inner path set_at called");
          });
          google.maps.event.addListener(selectedShape.getPaths().getAt(newPathIdx),function() {
            alert("inner path insert_at called");
          });
          google.maps.event.addListener(selectedShape.getPaths().getAt(newPathIdx),function() {
            alert("inner path remove_at called");
          });
          break;
        }
      }
      if (!found) {
        overlayArr.push(e.overlay);
      }

      var newShape = e.overlay;
      newShape.type = e.type;
      google.maps.event.addListener(newShape,'click',function() {
        setSelection(newShape);
      });
    }
    setSelection(newShape);
  });

  google.maps.event.addListener(drawingManager,'polygoncomplete',function(polygon) {
    console.log("polygoncomplete,paths=" + selectedShape.getPaths().getLength());
    for (var i = 0; i < selectedShape.getPaths().getLength(); i++) {
      google.maps.event.addListener(selectedShape.getPaths().getAt(i),function() {
        alert("set_at called");
      });
      google.maps.event.addListener(selectedShape.getPaths().getAt(i),function() {
        alert("insert_at called");
      });
      google.maps.event.addListener(selectedShape.getPaths().getAt(i),function() {
        alert("remove_at called");
      });
    }
  });
}
<div id="polymap" style="height:300px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIc-PhM9_Uwpjbks0WPvtkKYagOXTk12A&libraries=drawing&callback=initialize&" async defer></script>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot