Question

我正在尝试在此脚本中制作矩形 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>

Answer 1

您可以在事件侦听器之外创建矩形而不设置地图，这样它们就不可见了。并在缩放更改集映射属性：

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

见example at jsbin;

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

1 个答案: