Javascript 在缩放时更新谷歌地图矩形

我正在尝试制作这个脚本中的矩形 在每个缩放级别上更新

我试图让每个矩形只显示在选定的缩放级别上，并在级别更改时消失

出于某种原因，它不断地吸引着他们

 function initialize() {
  var myLatLng = new google.maps.LatLng(30, 30);
   var mapOptions = {
zoom: 4,
center: myLatLng
   };

   var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

   google.maps.event.addListener(map, 'zoom_changed', function() {
     var zoomLevel = map.getZoom();
     map.setCenter(myLatLng);
if (zoomLevel>=1 && zoomLevel<=5) { 

   var r1 = new google.maps.Rectangle({
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 2,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     map: map,
     bounds: new google.maps.LatLngBounds(
       new google.maps.LatLng(30, 29),
       new google.maps.LatLng(29, 30))
   });

 } else if (zoomLevel>5 && zoomLevel<=10) {

   var r2 = new google.maps.Rectangle({
     strokeColor: '#FFF000',
     strokeOpacity: 0.8,
     strokeWeight: 2,
     fillColor: '#FFF000',
     fillOpacity: 0.35,
          map: map,
          bounds: new google.maps.LatLngBounds(
       new google.maps.LatLng(29, 28),
       new google.maps.LatLng(28, 29))
   });
 }

   });
 }

 google.maps.event.addDomListener(window, 'load', initialize);

    </script>

函数初始化（）{
var mylatng=newgoogle.maps.LatLng（30,30）；
变量映射选项={
缩放：4，
中心：myLatLng
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
google.maps.event.addListener（映射'zoom_changed'，函数（）{
var zoomLevel=map.getZoom（）；
地图设置中心（myLatLng）；
如果（zoomLevel>=1&&zoomLevel5&&zoomLevel，则可以在事件侦听器外部创建不带贴图集的矩形，使其不可见。在缩放更改集贴图属性时：

google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    console.log(zoomLevel);
    map.setCenter(myLatLng);

    if (zoomLevel>=1 && zoomLevel<=5) { 
        r1.setMap(map);
        r2.setMap(null);
    } else if (zoomLevel>5 && zoomLevel<=10) {
        r1.setMap(null);
        r2.setMap(map);
    } else {
      r1.setMap(null);
      r2.setMap(null);
    }
});

google.maps.event.addListener（映射'zoom_changed'，函数（）{
var zoomLevel=map.getZoom（）；
console.log（zoomLevel）；
地图设置中心（myLatLng）；
如果（zoomLevel>=1&&zoomLevel5&&zoomLevel请记住，次值是次缩放。值越大，缩放越大。错误是，显示矩形后，后退时不清理它们。执行此操作后，必须删除它们。