如何删除绘制后的所有形状

请参阅此source google map drawing tools，如何通过一次单击按钮删除所有绘图形状？如何删除绘制后的所有形状

代码片段：

var drawingManager; 
 
     var selectedShape; 
 
     var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; 
 
     var selectedColor; 
 
     var colorButtons = {}; 
 

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

 
     function setSelection(shape) { 
 
     clearSelection(); 
 
     selectedShape = shape; 
 
     shape.setEditable(true); 
 
     selectColor(shape.get('fillColor') || shape.get('strokeColor')); 
 
     } 
 

 
     function deleteSelectedShape() { 
 
     if (selectedShape) { 
 
      selectedShape.setMap(null); 
 
     } 
 
     } 
 

 
     function selectColor(color) { 
 
     selectedColor = color; 
 
     for (var i = 0; i < colors.length; ++i) { 
 
      var currColor = colors[i]; 
 
      colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; 
 
     } 
 

 
     // Retrieves the current options from the drawing manager and replaces the 
 
     // stroke or fill color as appropriate. 
 
     var polylineOptions = drawingManager.get('polylineOptions'); 
 
     polylineOptions.strokeColor = color; 
 
     drawingManager.set('polylineOptions', polylineOptions); 
 

 
     var rectangleOptions = drawingManager.get('rectangleOptions'); 
 
     rectangleOptions.fillColor = color; 
 
     drawingManager.set('rectangleOptions', rectangleOptions); 
 

 
     var circleOptions = drawingManager.get('circleOptions'); 
 
     circleOptions.fillColor = color; 
 
     drawingManager.set('circleOptions', circleOptions); 
 

 
     var polygonOptions = drawingManager.get('polygonOptions'); 
 
     polygonOptions.fillColor = color; 
 
     drawingManager.set('polygonOptions', polygonOptions); 
 
     } 
 

 
     function setSelectedShapeColor(color) { 
 
     if (selectedShape) { 
 
      if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { 
 
      selectedShape.set('strokeColor', color); 
 
      } else { 
 
      selectedShape.set('fillColor', color); 
 
      } 
 
     } 
 
     } 
 

 
     function makeColorButton(color) { 
 
     var button = document.createElement('span'); 
 
     button.className = 'color-button'; 
 
     button.style.backgroundColor = color; 
 
     google.maps.event.addDomListener(button, 'click', function() { 
 
      selectColor(color); 
 
      setSelectedShapeColor(color); 
 
     }); 
 

 
     return button; 
 
     } 
 

 
     function buildColorPalette() { 
 
     var colorPalette = document.getElementById('color-palette'); 
 
     for (var i = 0; i < colors.length; ++i) { 
 
      var currColor = colors[i]; 
 
      var colorButton = makeColorButton(currColor); 
 
      colorPalette.appendChild(colorButton); 
 
      colorButtons[currColor] = colorButton; 
 
     } 
 
     selectColor(colors[0]); 
 
     } 
 

 
     function initialize() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 10, 
 
      center: new google.maps.LatLng(22.344, 114.048), 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
      disableDefaultUI: true, 
 
      zoomControl: true 
 
     }); 
 

 
     var polyOptions = { 
 
      strokeWeight: 0, 
 
      fillOpacity: 0.45, 
 
      editable: true 
 
     }; 
 
     // Creates a drawing manager attached to the map that allows the user to draw 
 
     // markers, lines, and shapes. 
 
     drawingManager = new google.maps.drawing.DrawingManager({ 
 
      drawingMode: google.maps.drawing.OverlayType.POLYGON, 
 
      markerOptions: { 
 
      draggable: true 
 
      }, 
 
      polylineOptions: { 
 
      editable: true 
 
      }, 
 
      rectangleOptions: polyOptions, 
 
      circleOptions: polyOptions, 
 
      polygonOptions: polyOptions, 
 
      map: map 
 
     }); 
 

 
     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(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); 
 
      } 
 
     }); 
 

 
     // Clear the current selection when the drawing mode is changed, or when the 
 
     // map is clicked. 
 
     google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); 
 
     google.maps.event.addListener(map, 'click', clearSelection); 
 
     google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); 
 

 
     buildColorPalette(); 
 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize);

#map, html, body { 
 
     padding: 0; 
 
     margin: 0; 
 
     height: 100%; 
 
     } 
 

 
     #panel { 
 
     width: 200px; 
 
     font-family: Arial, sans-serif; 
 
     font-size: 13px; 
 
     float: right; 
 
     margin: 10px; 
 
     } 
 

 
     #color-palette { 
 
     clear: both; 
 
     } 
 

 
     .color-button { 
 
     width: 14px; 
 
     height: 14px; 
 
     font-size: 0; 
 
     margin: 2px; 
 
     float: left; 
 
     cursor: pointer; 
 
     } 
 

 
     #delete-button { 
 
     margin-top: 5px; 
 
     }

<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script> 
 
    <div id="panel"> 
 
     <div id="color-palette"></div> 
 
     <div> 
 
     <button id="delete-button">Delete Selected Shape</button> 
 
     </div> 
 
    </div> 
 
    <div id="map"></div>

来源

2012-08-17 Louisth

你试过的是什么没有奏效？ – Marcelo 2012-08-17 13:09:10

这是为什么关闭？这是一个完全合法的问题。我不确定它是如何更清晰的 - 他希望通过一次点击就可以从地图上移除绘图对象。 – 2017-11-28 22:21:17

如果你想删除（或做任何事情）在地图上的所有对象，你需要保持对它们的引用，你可以使用。

当创建的形状，将其推到一个数组（必须是全球在点击按钮的处理程序中使用）。
当单击“全部删除”按钮时，遍历该数组，在每个对象上调用.setMap（null）。

Example

推叠加到阵列（all_overlays）：

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

删除所有形状：

function deleteAllShape() { 
    for (var i=0; i < all_overlays.length; i++) 
    { 
    all_overlays[i].overlay.setMap(null); 
    } 
    all_overlays = []; 
}

代码片断：

var drawingManager; 
 
var all_overlays = []; 
 
var selectedShape; 
 
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; 
 
var selectedColor; 
 
var colorButtons = {}; 
 

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

 
function setSelection(shape) { 
 
    clearSelection(); 
 
    selectedShape = shape; 
 
    shape.setEditable(true); 
 
    selectColor(shape.get('fillColor') || shape.get('strokeColor')); 
 
} 
 

 
function deleteSelectedShape() { 
 
    if (selectedShape) { 
 
    selectedShape.setMap(null); 
 
    } 
 
} 
 

 
function deleteAllShape() { 
 
    for (var i = 0; i < all_overlays.length; i++) { 
 
    all_overlays[i].overlay.setMap(null); 
 
    } 
 
    all_overlays = []; 
 
} 
 

 
function selectColor(color) { 
 
    selectedColor = color; 
 
    for (var i = 0; i < colors.length; ++i) { 
 
    var currColor = colors[i]; 
 
    colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; 
 
    } 
 

 
    // Retrieves the current options from the drawing manager and replaces the 
 
    // stroke or fill color as appropriate. 
 
    var polylineOptions = drawingManager.get('polylineOptions'); 
 
    polylineOptions.strokeColor = color; 
 
    drawingManager.set('polylineOptions', polylineOptions); 
 

 
    var rectangleOptions = drawingManager.get('rectangleOptions'); 
 
    rectangleOptions.fillColor = color; 
 
    drawingManager.set('rectangleOptions', rectangleOptions); 
 

 
    var circleOptions = drawingManager.get('circleOptions'); 
 
    circleOptions.fillColor = color; 
 
    drawingManager.set('circleOptions', circleOptions); 
 

 
    var polygonOptions = drawingManager.get('polygonOptions'); 
 
    polygonOptions.fillColor = color; 
 
    drawingManager.set('polygonOptions', polygonOptions); 
 
} 
 

 
function setSelectedShapeColor(color) { 
 
    if (selectedShape) { 
 
    if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { 
 
     selectedShape.set('strokeColor', color); 
 
    } else { 
 
     selectedShape.set('fillColor', color); 
 
    } 
 
    } 
 
} 
 

 
function makeColorButton(color) { 
 
    var button = document.createElement('span'); 
 
    button.className = 'color-button'; 
 
    button.style.backgroundColor = color; 
 
    google.maps.event.addDomListener(button, 'click', function() { 
 
    selectColor(color); 
 
    setSelectedShapeColor(color); 
 
    }); 
 

 
    return button; 
 
} 
 

 
function buildColorPalette() { 
 
    var colorPalette = document.getElementById('color-palette'); 
 
    for (var i = 0; i < colors.length; ++i) { 
 
    var currColor = colors[i]; 
 
    var colorButton = makeColorButton(currColor); 
 
    colorPalette.appendChild(colorButton); 
 
    colorButtons[currColor] = colorButton; 
 
    } 
 
    selectColor(colors[0]); 
 
} 
 

 
function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(22.344, 114.048), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    disableDefaultUI: true, 
 
    zoomControl: true 
 
    }); 
 

 
    var polyOptions = { 
 
    strokeWeight: 0, 
 
    fillOpacity: 0.45, 
 
    editable: true 
 
    }; 
 
    // Creates a drawing manager attached to the map that allows the user to draw 
 
    // markers, lines, and shapes. 
 
    drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.POLYGON, 
 
    markerOptions: { 
 
     draggable: true 
 
    }, 
 
    polylineOptions: { 
 
     editable: true 
 
    }, 
 
    rectangleOptions: polyOptions, 
 
    circleOptions: polyOptions, 
 
    polygonOptions: polyOptions, 
 
    map: map 
 
    }); 
 

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

 
    // Clear the current selection when the drawing mode is changed, or when the 
 
    // map is clicked. 
 
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); 
 
    google.maps.event.addListener(map, 'click', clearSelection); 
 
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); 
 
    google.maps.event.addDomListener(document.getElementById('delete-all-button'), 'click', deleteAllShape); 
 

 
    buildColorPalette(); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

#map, 
 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#panel { 
 
    width: 200px; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 13px; 
 
    float: right; 
 
    margin: 10px; 
 
} 
 
#color-palette { 
 
    clear: both; 
 
} 
 
.color-button { 
 
    width: 14px; 
 
    height: 14px; 
 
    font-size: 0; 
 
    margin: 2px; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
#delete-button { 
 
    margin-top: 5px; 
 
}

<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script> 
 
<div id="panel"> 
 
    <div id="color-palette"></div> 
 
    <div> 
 
    <button id="delete-button">Delete Selected Shape</button> 
 
    <button id="delete-all-button">Delete All Shapes</button> 
 
    </div> 
 
</div> 
 
<div id="map"></div>

来源

2012-08-17 13:27:44 geocodezip

如何删除绘制后的所有形状

回答

相关问题