Question

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

但是如何在用户启动的精确时刻删除使用DrawingManager创建的形状会绘制一个新形状？

据我所知，没有“抽象启动”事件（不在他们的documentation中），例如，在用户开始绘制形状时可能会触发。

我试过用这个......

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

...还使用“点击”事件，但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;
  }
}

Answer 1

太容易了。将事件附加到地图画布而不是地图：

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

很好的提示here。

绘制新图形时删除DrawingManager形状

1 个答案: