从Google地图中删除矩形

时间:2012-03-13 16:41:19

标签: google-maps google-maps-api-3

我正在使用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但它没有用。有什么建议吗?

2 个答案:

答案 0 :(得分:8)

google.maps.Rectangle类有一个setMap方法。如果将null传递给它,则删除该矩形。见http://code.google.com/apis/maps/documentation/javascript/reference.html#Rectangle

请注意,这意味着您需要保留矩形的实例,以便可以调用setMap方法。重绘函数中的局部矩形变量不会保留它,除非再次使用相同的latLng对重新调用重绘。

答案 1 :(得分:0)

你可以在每次redraw()调用时使用带有null输入参数的setMap()函数。

&#13;
&#13;
// 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);
&#13;
&#13;
&#13;