如何删除绘制后的所有形状 [英] How to delete all the shape after draw
问题描述
请参阅源谷歌地图绘图工具,如何通过一次点击按钮删除所有绘图形状?
代码段:
var drawingManager; var selectedShape; var colors = ['#1E90FF','#FF1493','#32CD32','#FF8C00','#4B0082']; var selectedColor; var colorButtons = {};函数clearSelection(){if(selectedShape){selectedShape.setEditable(false); selectedShape = null; }} function setSelection(shape){clearSelection(); selectedShape = shape; shape.setEditable(真); 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'; } //从绘图管理器中检索当前选项并根据需要替换//笔划或填充颜色。 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); }}}函数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);});返回按钮; } 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}; //创建一个附加到地图的绘图管理器,允许用户绘制标记,线条和形状。 drawingManager = new google.maps.drawing.DrawingManager({drawingMode:google.maps.drawing.OverlayType.POLYGON,markerOptions:{dragggable: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){//绘制形状后切换回非绘图模式。drawingManager.setDrawingMode(null); //添加一个事件侦听器,当用户将鼠标放在它上面时,选择新绘制的形状var newShape = e.overlay; newShape.type = e.type; google.maps。 event.addListener(newShape,'click',function(){setSelection(newShape);}); setSelection(newShape);}}); //当绘图模式改变或者单击//地图时清除当前选择。 google.maps.event.addListener(drawingManager,'drawingmode_changed',clearSelection); google.maps.event.addListener(地图,'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;保证金:0;身高:100%; } #panel {width:200px; font-family:Arial,sans-serif; font-size:13px; float:right; margin:10px; }#color-palette {clear:both; } .color-button {width:14px;身高:14px; font-size:0; margin:2px;向左飘浮;光标:指针; }#delete-button {margin-top:5px; }
< script src =http:// maps ?.google.com /地图/ API / JS库=绘制>< /脚本> < div id =panel> < div id =color-palette>< / div> < DIV> < button id =delete-button>删除所选形状< / button> < / DIV> < / DIV> < div id =map>< / div>
如果你想删除(或者做任何事情)地图上的所有对象,你需要保留对它们的引用,你可以使用它。
- 创建一个形状时,将其推入一个数组中(需要是全局的以便在按钮单击处理程序中使用)
- 单击全部删除按钮时,遍历该数组,对每个对象调用.setMap(null)。
将覆盖层推入一个数组(all_overlays):
pre $ lt; code> google.maps.event.addListener(drawingManager,'overlaycomplete',function(e){
all_overlays.push(e);
if(e.type!= google.maps.drawing.OverlayType.MARKER){
//绘制形状后切换回非绘图模式。
drawingManager.se tDrawingMode(NULL);
//添加一个事件侦听器,用于在用户
//将鼠标放在它上面时选择新绘制的形状。
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(空值);
}
all_overlays = [];
}
程式码片段:
<
var drawingManager; var all_overlays = []; var selectedShape; var colors = ['#1E90FF','#FF1493','# var colorColor; var colorButtons = {}; function clearSelection(){if(selectedShape){selectedShape.setEditable(false); selectedShape = null; }} function setSelection(shape){clearSelection(); selectedShape = shape; shape.setEditable(真); selectColor(shape.get('fillColor')|| shape.get('strokeColor'));} function deleteSelectedShape(){if(selectedShape){selectedShape.setMap(null); }}函数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'; } //从绘图管理器中检索当前选项并根据需要替换//笔划或填充颜色。 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); }}}函数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);});返回按钮;}函数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}; //创建一个附加到地图的绘图管理器,允许用户绘制标记,线条和形状。 drawingManager = new google.maps.drawing.DrawingManager({drawingMode:google.maps.drawing.OverlayType.POLYGON,markerOptions:{dragggable: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){//切换回非drawingManager.setDrawingMode(null); //添加一个事件侦听器,当用户将鼠标拖拽到其上时,添加一个事件侦听器var newShape = e.overlay; newShape.type = e .type; google.maps.event.addListener(newShape,'click',function(){setSelection(newShape);}); setSelection(newShape);}}); //当绘图模式改变或者单击//地图时清除当前选择。 google.maps.event.addListener(drawingManager,'drawingmode_changed',clearSelection); google.maps.event.addListener(地图,'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;保证金: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;身高:14px; font-size:0; margin:2px;向左飘浮; 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>删除所选形状< / button> < button id =delete-all-button>删除所有形状< / button> < / div>< / div>< div id =map>< / div>
Refer from this source google map drawing tools, how to deleted all the drawing shape by one click button?
code snippet:
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>
If you want to delete (or do anything with) all the objects on the map, you need to keep references to them that you can use.
- When a shape is created, push it into an array (needs to be global to be used in a button click handler).
- When the "delete all" button is clicked, iterate through that array, calling .setMap(null) on each of the objects.
Push the overlay onto an array (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);
}
});
Delete all shapes:
function deleteAllShape() {
for (var i=0; i < all_overlays.length; i++)
{
all_overlays[i].overlay.setMap(null);
}
all_overlays = [];
}
Code snippet:
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>
这篇关于如何删除绘制后的所有形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!