Question

我目前正在开发基于地图的服务。用户可以通过使用drawingManager绘制矩形和多边形来选择地图上的项目。在创建它们之后，我将这些形状推送到全局数组，以便像这样控制它们：

      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);
      var newShape = e.overlay;
      all_overlays.push(newShape);
      newShape.type = e.type;
      newShape.id = all_overlays.length-1;
      all_overlays[newShape.id].id = all_overlays.length-1;
}

用户可以选择删除单个形状。我实现了这样的删除：

function deleteSelectedShape() {
if (selectedShape) {
    all_overlays.splice(selectedShape.id,1);
    while(jQuery.inArray(selectedShape.id, selected_shapes) != -1)
        {
        var shape_index = jQuery.inArray(selectedShape.id, selected_shapes);
        selected_shapes.splice(shape_index,1);
        selected_buoys.splice(shape_index,1);
        }
    selectedShape.setMap(null);
    selectedShape = '';
    buildList();
    highlightSelectedBuoys();   
}

不幸的是，这不起作用。如果我得到一个有4个形状的数组（ids：0,1,2,3）并删除id = 0的数组，all_overlays数组不会改变它的大小，这会在下一步中混淆整个事物。我的错误在哪里？

Answer 1

忘记newShape.id，剪接后形状的索引会发生变化。

改为使用indexOf：

 all_overlays.splice(all_overlays.indexOf(selectedShape),1);

indexOf（）方法返回可在数组中找到给定元素的第一个索引，如果不存在，则返回-1。 indexOf使用严格相等（与===或三等号运算符使用的方法相同）将searchElement与Array的元素进行比较。请注意，如果将-1作为参数传递，则splice不会执行任何操作。

完整示例：

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);
         var newShape = e.overlay;
         all_overlays.push(newShape);
         newShape.type = e.type;
      }
}

function deleteSelectedShape() {
    if (selectedShape) {
        // here is the difference
        all_overlays.splice(all_overlays.indexOf(selectedShape),1);
        // here maybe you need the same fix.
        selected_shapes.splice(selected_shapes.indexOf(selectedShape),1);
        selected_buoys.splice(selected_buoys.indexOf(selectedShape),1);
        // remove from map.
        selectedShape.setMap(null);
        selectedShape = ''; // maybe should be undefined.
        // do stuffs
        buildList();
        highlightSelectedBuoys();   
    }
}

注意：这不是完全跨浏览器，因为所有浏览器都不支持indexOf。 但您可以自行实施。阅读This帖子以支持旧浏览器。

Answer 2

我写了一个类似的项目。

while(overlays.length>0)
{
    var tmpOverlay = overlays.shift();
    tmpOverlay.setMap(null); 
}

其他方式：

for(var i = 0; i < markers.length; i++) { var t = markers[i]; t.setMap(null); t = null; }
for(var i = 0; i < overlays.length; i++) { var t = overlays[i]; t.setMap(null); t = null; }

while (markers.length) { markers.pop(); } 
while (overlays.length) { overlays.pop(); }

overlays = []; markers = [];

叠加是用户绘制的多边形，并且在叠加完成触发后生成标记。

此代码将删除推送到阵列的所有叠加层。为了只删除一个（用户点击InfoWindow上的“删除”），我得到了这个：

shapeListTmp = []; 
var tmp = shapeList.slice(); //ShapeList is my GPoly Arrays
var index = 1;  
removeAllOverlays();  //Delete all shapes from Map

tmp.forEach(function (e) {
    if (e.id != polyId) //All GPoly have an 'id' just like yours 1,2,3, 4--- polyId is going to be deleted
    {
         e.id = index;
         shapeListTmp.push(e); //Push this Poly to the new Array
         drawPolygon(e); //Draw it again on map. (Mine function)
         index = index + 1;
    }
 });        
 shapeList = shapeListTmp.slice(); #Copy tmpArray to original.

我必须从地图中删除它们并再次重绘。设置setMap（null）对我也没有任何作用。

从绘图管理器覆盖数组中删除元素

2 个答案:

改为使用indexOf：

完整示例：