Удалить прямоугольник с Google Maps

Question

Я использую Google Maps v3 (javascript).Когда я загружаю свою карту, я рисую прямоугольник следующим образом:

<script type="text/javascript">
  // Global variables
  var map;

  /**
   * Called on the initial page load.
   */
  function init() {

    map = new google.maps.Map(document.getElementById('map'), {
      'zoom': 6,
      'center': new google.maps.LatLng(41.87194,12.567379999999957),
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });

    //Region Overlay
    var latLng1;
    var latLng2;

    <?php foreach ($this->arrRegion as $region) { ?>
        latLng1 = new google.maps.LatLng(<?php echo $region['boundLat1_region']; ?>,<?php echo $region['boundLng1_region']; ?>);
        latLng2 = new google.maps.LatLng(<?php echo $region['boundLat2_region']; ?>,<?php echo $region['boundLng2_region']; ?>);
        redraw(latLng1,latLng2);
    <?php }?>

  }

  /**
   * Updates the Rectangle's bounds to resize its dimensions.
   */
  function redraw(latLng1,latLng2) {
    var latLngBounds = new google.maps.LatLngBounds(latLng1,latLng2);
     // Create a new Rectangle overlay
    var rectangle = new google.maps.Rectangle({map: map, bounds: latLngBounds});
  }

  // Register an event listener to fire when the page finishes loading.
  google.maps.event.addDomListener(window, 'load', init);
</script>

Теперь моя цель - удалить прямоугольник.Я пытаюсь использовать map.clear, но это не сработало.Любое предложение?

Answer 1

В классе google.maps.Rectangle есть метод setMap. Если вы передадите null, прямоугольник будет удален. Смотри http://code.google.com/apis/maps/documentation/javascript/reference.html#Rectangle

Обратите внимание, что это означает, что вам нужно хранить экземпляры ваших прямоугольников вокруг, чтобы вы могли вызывать метод setMap. Локальная переменная прямоугольника в вашей функции перерисовки не будет ее хранить, если только вы снова не вызовете перерисовку с теми же парами latLng.

Answer 2

Вы можете использовать функцию setMap () с нулевым входным параметром при каждом вызове redraw ().

// Global variables
  var map;
  var rectangle;

  /**
   * Called on the initial page load.
   */
  function init() {

    map = new google.maps.Map(document.getElementById('map'), {
      'zoom': 6,
      'center': new google.maps.LatLng(41.87194,12.567379999999957),
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });

    //Region Overlay
    var latLng1;
    var latLng2;

    <?php foreach ($this->arrRegion as $region) { ?>
        latLng1 = new google.maps.LatLng(<?php echo $region['boundLat1_region']; ?>,<?php echo $region['boundLng1_region']; ?>);
        latLng2 = new google.maps.LatLng(<?php echo $region['boundLat2_region']; ?>,<?php echo $region['boundLng2_region']; ?>);
        redraw(latLng1,latLng2);
    <?php }?>

  }

  /**
   * Updates the Rectangle's bounds to resize its dimensions.
   */
  function redraw(latLng1,latLng2) {
    var latLngBounds = new google.maps.LatLngBounds(latLng1,latLng2);
    
    // Remove Previous Rectangle
    if(rectangle)
      rectangle.setMap(null);
    
     // Create a new Rectangle overlay
    rectangle = new google.maps.Rectangle({map: map, bounds: latLngBounds});
  }

  // Register an event listener to fire when the page finishes loading.
  google.maps.event.addDomListener(window, 'load', init);