在绘制有效多边形之前单击同一点两次时会触发多边形叠加完成事件

Question

我们正在使用谷歌地图的绘图管理器来绘制多边形。当用户在绘制有效多边形之前错误地单击同一点两次时，将触发 overrideCompleted 事件。有没有办法只在绘制有效的多边形后触发overlayCompleted事件？

var map;

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({

    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    }
  });

  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {

		console.log('overlay complete');
  });
}

initialize();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=drawing">
</script>

请参考我们创建的小提琴。选择多边形并单击同一点两次时，正在调用overlaycompleted事件。

演示链接

Answer 1

我相信 OverlayComplete 事件为您提供了创建的叠加层 - https://developers.google.com/maps/documentation/javascript/reference/3.56/drawing?hl=en#OverlayCompleteEvent

为了执行您所描述的操作，您首先需要定义什么是“有效多边形”。听起来你可能想要的是一个至少有 4 个 LatLng 点的多边形，其中第一个和最后一个 LatLng 是相同的。这将代表一个通过单击第一个点自动完成的三角形。