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

Question

我目前正在开发基于 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);
      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发布以支持旧浏览器。