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 메서드를 호출 할 수 있도록 사각형의 인스턴스를 주변에 유지해야한다는 것을 의미합니다. 다시 그리기를 동일한 latLng 쌍을 다시 호출하지 않는 한 다시 그리기 함수의 로컬 직사각형 변수는이를 유지하지 않습니다.

Answer 2

모든 redraw() 호출시 null 입력 매개 변수와 함께 setMap() 함수를 사용할 수 있습니다.

// 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);