修改zoom_changed事件以將地圖縮放2級

Question

如何修改zoom_changed事件的代碼以支持2級放大和縮小？ 例如，我希望地圖從11變為13到15，依此類推。 基本上，僅奇數級縮放。

我當前的實現導致Uncaught RangeError: Maximum call stack size exceeded由於事件不斷觸發，導致Uncaught RangeError: Maximum call stack size exceeded錯誤。

我知道我可以創建自定義放大/縮小按鈕（如本解決方案所示 ），但是這種縮放功能僅在有人使用這些按鈕時才起作用。

我希望此縮放功能能夠在滾輪上運行，並在移動設備上同時放大/縮小。

這是我當前的實現示例： http : //jsfiddle.net/gbrdn0sn

代碼段：

 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

防止錯誤是為了防止事件在命令的“額外縮放”上觸發。 一種方法是忽略命令的“ zoom_changed”事件。

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

概念證明

代碼段：

 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>