在 Google 地图中将地面叠加层的可见性限制为特定缩放级别?

Limiting Ground Overlay visibility to specific zoom levels in Google Maps?

有没有办法将 Google 地图中地面覆盖层的可见性限制在某些缩放级别,比如 12 到 14 之间。

Google's example shown in their official documentation 中,地面叠加层显示在所有缩放级别。 这是他们的代码:

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

map on the 'zoom_changed` event (documentation) 添加事件侦听器:

zoom_changed | Arguments: None This event is fired when the map zoom property changes.

google.maps.event.addListener(map, 'zoom_changed', function() {
  var zoom = map.getZoom();
  if ((zoom > 12) && (zoom < 15)) {
    historicalOverlay.setMap(map);
  } else {
    historicalOverlay.setMap(null);
  }
});

var historicalOverlay;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 40.740,
      lng: -74.18
    }
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    document.getElementById('zoom').innerHTML = "zoom =" + map.getZoom();
    var zoom = map.getZoom();
    if ((zoom > 12) && (zoom < 15)) {
      historicalOverlay.setMap(map);
    } else {
      historicalOverlay.setMap(null);
    }
  })

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
    'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds);
  historicalOverlay.setMap(map);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="zoom"></div>
<div id="map"></div>