绘制新形状时删除DrawingManager形状

Delete a DrawingManager shape when drawing a new one

本文关键字：DrawingManager 形状 删除 新形状 绘制      更新时间：2023-09-26

我创建了一个自定义切换来初始化DrawingManager，当我使用currentShape.setMap(null)初始化它时，我能够删除当前形状(如果有的话)。

但是如何删除一个形状创建与DrawingManager在精确的时刻用户开始画一个新的?

据我所知，没有"drawingstart"事件(不在他们的文档中)，例如，当用户开始绘制形状时，可能会触发。

我试过使用这个…

google.maps.event.addListener(map, 'dragstart', function(e) {
  if (drawingManager.getDrawingMode() == "circle"){
    currentShape.setMap(null);
  }
});

…并且还使用'click'事件，但这些事件不会在drawingManager.getDrawingMode() == "circle"时触发。

function initMap(){
  map = new google.maps.Map(mapCanvas, mapOptions);
  $toggleDrawing.on('click', function(){      
    toggleDrawing();
  });
}
function toggleDrawing(){
  if (!isDrawing){
    if (!selectedArea){
      // enable drawing mode
      isDrawing = true;
      $toggleDrawing.addClass('active');
      initDrawing();
    }else{
      // delete selected area
      deleteSelectedArea();
    }
  }else{
    // disable drawing mode after drawing a shape
    isDrawing = false;
    $toggleDrawing.removeClass('active');
    drawingManager.setDrawingMode(null);
  }
}
function initDrawing(){
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: false
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    selectedArea = e.overlay;
    toggleDrawing(false); // will set to false
  });
  // 'click' or 'dragstart' event are not fired if `drawingManager.getDrawingMode() == "circle"` (or any other shape)
  // google.maps.event.addListener(map, 'click', function(e) {
  //   if (drawingManager.getDrawingMode() == "circle"){
  //     selectedArea.setMap(null);
  //   }
  // });
  // google.maps.event.addListener(map, 'dragstart', function(e) {
  //   if (drawingManager.getDrawingMode() == "circle"){
  //     selectedArea.setMap(null);
  //   }
  // });
}
function deleteSelectedArea() {
  if (selectedArea) {
    selectedArea.setMap(null);
    selectedArea = null;
  }
}

太简单了。将事件附加到地图画布上，而不是map:

// If it's drawing mode, delete the selected area (if there is one)
$('#map-canvas').on('click', function() {
  if (drawingManager.getDrawingMode() == "circle"){
    deleteSelectedArea();
  }
});
相关文章：