Question

如何修改zoom_changed事件的代码以支持按2级放大和缩小？例如，我希望地图从11到13到15，依此类推。基本上，奇数级仅缩放。

我当前的实现导致Uncaught RangeError: Maximum call stack size exceeded错误，因为事件一直在触发。

我知道我可以创建自定义放大/缩小按钮（如this solution所示），但这种缩放功能只有在有人使用这些按钮时才有效。

我希望此缩放功能适用于滚轮和捏合以在移动设备上放大/缩小。

以下是我当前实施的示例：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）;

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

proof of concept fiddle

代码段

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>

@echo off & setlocal enabledelayedexpansion

set var[0]=aaa
set var[1]=bbb
set var[2]=ccc
set var[3]=ddd
set var[4]=eee

for /L %%g in (1,1,3) do (
set /a num=!RANDOM! %% 5
echo position: !num!
echo keyword: !var[%num%]! :: THIS LINE NOT WORKING
)

pause

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

1 个答案: