Googleマップでポリゴンを描画して削除する

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); 
    } 
    }); 

ここで私はポリゴンcompleteイベントのリセットボタンを表示し、現在の多角形の面積を探してみてください：ここでは

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をnullに設定します。 DrawingManagerを再び有効にするときは、google.maps.drawing.OverlayType.POLYGONに戻す必要があります。

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

proof of concept fiddle

コードスニペット： `キャッチされないにReferenceError：

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"></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>