首页 > 解决方案 > 在绘制有效多边形之前两次单击同一点时会触发多边形叠加完成事件

问题描述

我们正在使用 Google Map 的绘图管理器来绘制多边形。当用户在绘制有效多边形之前错误地单击了两次相同的点时,将触发 overlayCompleted 事件。有没有办法仅在绘制有效多边形后触发 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 事件。

演示链接

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

解决方案


推荐阅读