Как удалить всю фигуру после розыгрыша [закрыто]

17

Обратитесь к этому источнику google инструменты рисования карты , как удалить всю форму чертежа одним нажатием кнопки?

фрагмент кода:

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>
    
задан Louisth 17.08.2012 в 13:03
источник

1 ответ

39

Если вы хотите удалить (или сделать что-либо с) все объекты на карте, вам нужно сохранить ссылки на них, которые вы можете использовать.

  1. Когда создается форма, введите ее в массив (она должна быть глобальной, которая будет использоваться в обработчике нажатия кнопки).
  2. Когда нажата кнопка «удалить все», выполните итерацию по этому массиву, вызвав .setMap (null) для каждого из объектов.

Пример

Нажмите наложение на массив (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>
    
ответ дан geocodezip 17.08.2012 в 15:27
источник

___ taggcc ___ GCC - это сборник компиляторов GNU. Это де-факто стандартный компилятор C на Linux и поддерживает многие другие языки и платформы. ___ ___ Является ли qstnhdr Googles GOLANG интерпретатор или компилятор? ___ qstntxt ___

Я изучаю Golang, и вижу, что у него есть компилятор. Но компилирует ли он код уровня сборки или просто преобразует его в BYTECODES, а затем вызывает эту компиляцию? Я имею в виду, что даже в PHP мы можем преобразовать его в BYTECODES и иметь более высокую производительность. Является ли golang ЗАМЕНА для программирования и компиляции системного уровня?

    
___ tagystem ___ Система может ссылаться на набор взаимозависимых компонентов; Инфраструктура низкого уровня, такая как операционная система (с высокой языковой точки зрения) или объект или функция для доступа к предыдущей ___ answer12249365 ___

Это действительно компилятор (на самом деле он содержит 2 компилятора), и он делает полностью самостоятельные исполняемые файлы. Вам не нужна никакая дополнительная библиотека или какая-либо среда выполнения для ее выполнения на вашем сервере. Вам просто нужно скомпилировать его для вашей целевой компьютерной архитектуры.

Из документации :

  

Существуют две официальные цепочки инструментов компилятора Go. Этот документ фокусируется   на компилятор gc Go и инструменты (6g, 8g и т. д.). Информацию о том, как   для работы с gccgo, более традиционным компилятором, использующим задний конец GCC,   см. Настройка и использование gccgo.

     

Компиляторы Go поддерживают три набора инструкций. Существуют важные   различия в качестве компиляторов для разных   архитектуры.

     

amd64 (a.k.a. x86-64); 6g, 6l, 6c, 6a   Зрелая реализация.   компилятор имеет эффективный оптимизатор (регистратор) и генерирует хорошие   кода (хотя иногда gccgo может заметно улучшить).

     

386 (a.k.a. x86 или x86-32); 8g, 8л, 8с, 8а   Сравнение с портом amd64.

     

arm (a.k.a. ARM); 5g, 5l, 5c, 5a   Поддерживает только двоичные файлы Linux. Менее широко используется, чем   другие порты и, следовательно, не прошли тщательную проверку.

     

За исключением   такие как код интерфейса операционной системы низкого уровня, время выполнения   поддержка одинакова во всех портах и ​​включает мусор маркировки и разметки   коллектора, эффективного массива и нарезки строк и поддержки для   эффективные горуты, такие как стеки, которые растут и сокращаются по требованию.

     

Компиляторы могут ориентироваться на FreeBSD, Linux, NetBSD, OpenBSD, OS X   (Darwin) и операционных систем Windows. Полный набор поддерживаемых   комбинации перечислены в обсуждении переменных среды   ниже.

На сервере вы обычно будете нацеливаться на платформу %code% .

Заметим, что Go хорошо известен скоростью компиляции. При развертывании моих серверных программ я не создаю для разных платформ на компьютере разработки: я развертываю источники и компилирую непосредственно на производственных серверах. Начиная с Go1, у меня никогда не было компиляции кода на одной платформе, а не для компиляции на других.

В Windows у меня не возникло проблем с созданием %code% на моем компьютере разработки и просто отправкой этого %code% людям, которые никогда не устанавливали ничего связанных с Go.

    
___ taggo ___ Go - это язык программирования с открытым исходным кодом, первоначально разработанный в Google. Он статически типизирован с синтаксисом, слабо полученным из C, добавляя автоматическое управление памятью, безопасность типов, некоторые возможности динамического ввода, дополнительные встроенные типы, такие как массивы переменной длины и карты значений ключа, и большую стандартную библиотеку. ___

Как определить именованные параметры C #