修改zoom_changed事件以将地图缩放2级

Question

How can I modify my code for the zoom_changed event to support zooming in and out by levels of 2? For example, I would prefer the map to go from 11 to 13 to 15, and so on. Basically, odd level zooms only.

My current implementation results in Uncaught RangeError: Maximum call stack size exceeded error because the event keeps firing.

I know I can create custom zoom in/out buttons (as demonstrated by this solution ), but this type of zoom functionality would only work if someone used those buttons.

I'm hoping for this zoom functionality to work for scrollwheel and pinch to zoom in/out on mobile as well.

Here's a sample of my current implementation: http://jsfiddle.net/gbrdn0sn

code snippet:

 var currentZoom; function initialize() { var mapOptions = { zoom: 11, center: { lat: -33.8666, lng: 151.1958 } }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); google.maps.event.addListener(map, 'zoom_changed', function() { currentZoom = map.getZoom() + 2; console.log(currentZoom); map.setZoom(currentZoom); document.getElementById('zoom-level').innerHTML = currentZoom; }); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body { height: 100%; margin: 0; padding: 0px } #map-canvas { height: 100%; width: 100%; } #current-zoom { display: block; width: 100%; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="zoom-level"></div> <div id="map-canvas"></div> 

Answer 1

To prevent the error is to prevent the event from firing on the commanded "extra zoom". One way to do that is to ignore the commanded "zoom_changed" event.

google.maps.event.addListenerOnce(map, 'zoom_changed', zoomChanged);

function zoomChanged() {
  // ignore zoom_changed event from this change
  google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
    // then process the next
    google.maps.event.addListenerOnce(map, 'zoom_changed', zoomChanged);
  });
  console.log("lastZoom=" + currentZoom + " map.getZoom()=" + map.getZoom());
  if (currentZoom < map.getZoom()) { // zooming in
    if (map.getZoom() % 2 != 1) {
      currentZoom = map.getZoom() + 1;
    } else {
      currentZoom = map.getZoom();
    }
  } else { // zooming out
    if (map.getZoom() % 2 != 1) {
      currentZoom = map.getZoom() - 1;
    } else {
      currentZoom = map.getZoom() - 2;
    }
  }
  console.log(currentZoom);
  map.setZoom(currentZoom);
  currentZoom = map.getZoom();
  document.getElementById('zoom-level').innerHTML = currentZoom;
}

proof of concept fiddle

code snippet:

 var currentZoom; function initialize() { var mapOptions = { zoom: 11, center: { lat: -33.8666, lng: 151.1958 } }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); currentZoom = map.getZoom(); google.maps.event.addListenerOnce(map, 'zoom_changed', zoomChanged); function zoomChanged() { // ignore zoom_changed event from this change google.maps.event.addListenerOnce(map, 'zoom_changed', function() { // then process the next google.maps.event.addListenerOnce(map, 'zoom_changed', zoomChanged); }); console.log("lastZoom=" + currentZoom + " map.getZoom()=" + map.getZoom()); if (currentZoom < map.getZoom()) { // zooming in if (map.getZoom() % 2 != 1) { currentZoom = map.getZoom() + 1; } else { currentZoom = map.getZoom(); } } else { // zooming out if (map.getZoom() % 2 != 1) { currentZoom = map.getZoom() - 1; } else { currentZoom = map.getZoom() - 2; } } console.log(currentZoom); map.setZoom(currentZoom); currentZoom = map.getZoom(); document.getElementById('zoom-level').innerHTML = currentZoom; } } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body { height: 100%; margin: 0; padding: 0px } #map-canvas { height: 100%; width: 100%; } #current-zoom { display: block; width: 100%; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="zoom-level"></div> <div id="map-canvas"></div>