在谷歌地圖中繪制和刪除多邊形

Question

我嘗試在單擊按鈕時繪制多邊形並從另一個按鈕刪除多邊形，第一次工作正常，但刪除后我無法繪制另一個多邊形。 請指導我。 這是代碼片段：

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

您正在將DrawingManager 的 DrawingMode設置為 null。 當您重新啟用 DrawingManager 時，您需要將其設置回google.maps.drawing.OverlayType.POLYGON 。

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

概念證明小提琴

代碼片段：

 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>