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

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. Локальная переменная прямоугольника в вашей функции перерисовки не будет содержать ее, если вы снова не вызовете redraw с теми же парами 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);