更新谷歌地图的缩放矩形

Update google maps rectangles on zoom

本文关键字：缩放 谷歌地图 更新      更新时间：2023-09-26

我试图使这个脚本中的矩形http://jsfiddle.net/uLd7H/更新每个缩放级别。

我试图让每个矩形只出现在选定的缩放级别上，并在级别改变时消失。

由于某种原因，它一直在画它们。

 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>

您可以在事件侦听器之外创建没有映射集的矩形，因此它们不可见。在缩放改变设置地图属性:

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

参见jsbin;

相关文章：