在谷歌地图中绘制和删除多边形

Question

我尝试在单击按钮时绘制多边形并从另一个按钮删除多边形，它第一次工作正常，但删除后我无法绘制另一个多边形。请指导我。这是代码sn-p：

var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true,
        fillColor: '#FF1493'
    };  
var selectedShape;

var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: false,
        markerOptions: {
            draggable: true
        },
        polygonOptions: polyOptions
  });

$('#enablePolygon').click(function(){
        drawingManager.setMap(map);
    });

$('#resetPolygon').click(function(){
        if (selectedShape) {
            selectedShape.setMap(null);
        }
        drawingManager.setMap(null);
        $('#showonPolygon').hide();
        $('#resetPolygon').hide();
    });

function clearSelection() {
        if (selectedShape) {
          selectedShape.setEditable(false);
          selectedShape = null;
        }
    }


    function setSelection(shape) {
        clearSelection();
        selectedShape = shape;
        shape.setEditable(true);
    }

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    all_overlays.push(e);
    if (e.type != google.maps.drawing.OverlayType.MARKER) {
      // Switch back to non-drawing mode after drawing a shape.
      drawingManager.setDrawingMode(null);

      // Add an event listener that selects the newly-drawn shape when the user
      // mouses down on it.
      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) {
//  var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath());
//  $('#areaPolygon').html(area.toFixed(2)+' Sq meters');
    $('#resetPolygon').show();
});

这里是 HTML：

<input type="button" id="enablePolygon" value="Calculate Area" />
<input type="button" id="resetPolygon" value="Reset" style="display: none;" />
<div id="showonPolygon" style="display:none;"><b>Area:</b> <span id="areaPolygon">&nbsp;</span></div>

Answer 1

您将DrawingMode of the DrawingManager 设置为空。重新启用 DrawingManager 时，需要将其设置回 google.maps.drawing.OverlayType.POLYGON。

$('#enablePolygon').click(function() {
  drawingManager.setMap(map);
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
});

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;
var all_overlays = [];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var polyOptions = {
    strokeWeight: 0,
    fillOpacity: 0.45,
    editable: true,
    fillColor: '#FF1493'
  };
  var selectedShape;

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: false,
    markerOptions: {
      draggable: true
    },
    polygonOptions: polyOptions
  });

  $('#enablePolygon').click(function() {
    drawingManager.setMap(map);
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  });

  $('#resetPolygon').click(function() {
    if (selectedShape) {
      selectedShape.setMap(null);
    }
    drawingManager.setMap(null);
    $('#showonPolygon').hide();
    $('#resetPolygon').hide();
  });
  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    //  var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath());
    //  $('#areaPolygon').html(area.toFixed(2)+' Sq meters');
    $('#resetPolygon').show();
  });

  function clearSelection() {
    if (selectedShape) {
      selectedShape.setEditable(false);
      selectedShape = null;
    }
  }


  function setSelection(shape) {
    clearSelection();
    selectedShape = shape;
    shape.setEditable(true);
  }

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    all_overlays.push(e);
    if (e.type != google.maps.drawing.OverlayType.MARKER) {
      // Switch back to non-drawing mode after drawing a shape.
      drawingManager.setDrawingMode(null);

      // Add an event listener that selects the newly-drawn shape when the user
      // mouses down on it.
      var newShape = e.overlay;
      newShape.type = e.type;
      google.maps.event.addListener(newShape, 'click', function() {
        setSelection(newShape);
      });
      setSelection(newShape);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" id="enablePolygon" value="Calculate Area" />
<input type="button" id="resetPolygon" value="Reset" style="display: none;" />
<div id="showonPolygon" style="display:none;"><b>Area:</b>  <span id="areaPolygon">&nbsp;</span>
</div>
<div id="map_canvas"></div>