绘制后如何删除所有形状 [英] How to delete all the shape after draw
本文介绍了绘制后如何删除所有形状的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
参考此源谷歌地图绘图工具,如何一键删除所有绘图形状?
代码片段:
vardrawingManager;var selectedShape;var 颜色 = ['#1E90FF'、'#FF1493'、'#32CD32'、'#FF8C00'、'#4B0082'];var selectedColor;var colorButtons = {};函数 clearSelection() {如果(选定的形状){selectedShape.setEditable(false);selectedShape = null;}}功能集选择(形状){清空选项();selectedShape = 形状;shape.setEditable(true);selectColor(shape.get('fillColor') || shape.get('strokeColor'));}函数 deleteSelectedShape() {如果(选定的形状){selectedShape.setMap(null);}}功能选择颜色(颜色){selectedColor = 颜色;for (var i = 0; i
#map, html, body {填充:0;边距:0;高度:100%;}#控制板 {宽度:200px;字体系列:Arial、sans-serif;字体大小:13px;浮动:对;边距:10px;}#调色板{清楚:两者;}.color-button {宽度:14px;高度:14px;字体大小:0;边距:2px;向左飘浮;光标:指针;}#删除按钮{边距顶部:5px;}
<script src="http://maps.google.com/maps/api/js?libraries=drawing"><<;/脚本><div id="面板"><div id="调色板"></div><div><button id="delete-button">删除选中的形状</button>
<div id="map"></div>
解决方案
如果您想删除(或对地图上的所有对象执行任何操作),您需要保留对它们的引用,以便您可以使用.
- 创建形状后,将其推送到数组中(需要全局才能在按钮单击处理程序中使用).
- 单击全部删除"按钮后,遍历该数组,对每个对象调用 .setMap(null).
将叠加层推送到数组上(all_overlays):
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {all_overlays.push(e);if (e.type != google.maps.drawing.OverlayType.MARKER) {//绘制完形状后切换回非绘制模式.drawManager.setDrawingMode(null);//添加一个事件监听器,当用户选择新绘制的形状时//鼠标向下.var newShape = e.overlay;newShape.type = e.type;google.maps.event.addListener(newShape, 'click', function() {设置选择(新形状);});设置选择(新形状);}});
删除所有形状:
function deleteAllShape() {for (var i=0; i < all_overlays.length; i++){all_overlays[i].overlay.setMap(null);}all_overlays = [];}
代码片段:
vardrawingManager;var all_overlays = [];var selectedShape;var 颜色 = ['#1E90FF'、'#FF1493'、'#32CD32'、'#FF8C00'、'#4B0082'];var selectedColor;var colorButtons = {};函数 clearSelection() {如果(选定的形状){selectedShape.setEditable(false);selectedShape = null;}}功能集选择(形状){清空选项();selectedShape = 形状;shape.setEditable(true);selectColor(shape.get('fillColor') || shape.get('strokeColor'));}函数 deleteSelectedShape() {如果(选定的形状){selectedShape.setMap(null);}}函数 deleteAllShape() {for (var i = 0; i < all_overlays.length; i++) {all_overlays[i].overlay.setMap(null);}all_overlays = [];}功能选择颜色(颜色){selectedColor = 颜色;for (var i = 0; i
#map,html,身体 {填充:0;边距:0;高度:100%;}#控制板 {宽度:200px;字体系列:Arial、sans-serif;字体大小:13px;浮动:对;边距:10px;}#调色板{清楚:两者;}.color-button {宽度:14px;高度:14px;字体大小:0;边距:2px;向左飘浮;光标:指针;}#删除按钮{边距顶部:5px;}
<script src="http://maps.google.com/maps/api/js?libraries=drawing"><<;/脚本><div id="面板"><div id="调色板"></div><div><button id="delete-button">删除选中的形状</button><button id="delete-all-button">删除所有形状</button>
<div id="map"></div>