Question

我在iOS上使用Google Maps JavaScript API时尝试更改缩放增量。例如，我不想从缩放14转到缩放15，而是希望它直接缩放16然后缩放18，依此类推......当用户使用缩放缩放手势时。

我知道我可以通过按钮实现这一点，但我似乎无法找到缩放缩放手势的解决方案。我意识到需要跟踪zoom_changed事件。

我分别在第17行和第19行添加Maximum call stack size exceeded map.setZoom(zoom + 2);和map.setZoom(zoom - 2);时出现错误。

看看这个JSFiddle：http://jsfiddle.net/2zmn9173/4/。这是我需要帮助的部分：

if (useragent.indexOf('iPhone') != -1) {
    google.maps.event.addListener(map, 'zoom_changed', function () {
        if (map.getZoom() > zoom) {
            alert("ZOOMED IN from Level " + zoom);
        } else if (map.getZoom() < zoom) {
            alert("ZOOMED OUT from Level " + zoom);
        }
        zoom = map.getZoom();
    });
}

顶部的按钮演示了我想要实现的功能，但是有缩放缩放手势。

Answer 1

如果您在问题中添加指向的那些行，您将在事件zoom_changed内触发事件zoom_changed，这将创建一个stackoverflow，因为它永远不会结束触发事件。

if (useragent.indexOf('iPhone') != -1) {
    google.maps.event.addListener(map, 'zoom_changed', function () {
        if (map.getZoom() > zoom) {
            map.setZoom(zoom + 2); //This will trigger "zoom_changed" again
        } else if (map.getZoom() < zoom) {
            map.setZoom(zoom - 2); //This will trigger "zoom_changed" again
        }
        zoom = map.getZoom();
    });
}

zoom = map.getZoom();之后会更改缩放，但其他事件已经执行，我的建议是设置一个值，然后调用setZoom：

if (useragent.indexOf('iPhone') != -1) {
    google.maps.event.addListener(map, 'zoom_changed', function () {
        var newZoom = map.getZoom(), oldZoom = zoom;
        if (newZoom > oldZoom) {
            oldZoom + 2;
        } else if (newZoom < oldZoom) {
            oldZoom - 2;
        }
        zoom = oldZoom;
        map.setZoom(oldZoom);
    });
}

Answer 2

简单方法：

仅在当前缩放不是偶数时设置新的缩放（这应该停止无限循环）

    google.maps.event.addListener(map,'zoom_changed',function(){
      var z=this.getZoom();
      if(z%2){//when zoom is a odd number
        var fx=((!isNaN(this.get('z'))&&this.get('z')<z))?2:0;
        this.setZoom(Math.floor(z/2)*2+fx);
      }else{
        this.set('z',z);
      }
    });

演示：

function initialize() {
  var ctrl = document.getElementById('zoom');
  map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 14,
      center: new google.maps.LatLng(52.549,
        13.425),
      noClear: true
    }),


    map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);

  google.maps.event.addListener(map, 'zoom_changed', function() {
    var z = this.getZoom();
    if (z % 2) { //when zoom is a odd number
      var fx = ((!isNaN(this.get('z')) && this.get('z') < z)) ? 2 : 0;
      this.setZoom(Math.floor(z / 2) * 2 + fx);
    } else {
      this.set('z', z);
    }
    ctrl.innerHTML = this.getZoom();
  });
  google.maps.event.trigger(map, 'zoom_changed');
}


google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}
#zoom {
  font: bold 2em Monospace;
  background: tomato;
  width: 30px;
  text-align: center;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas">
  <div id="zoom"></div>
</div>

自定义缩放控件导致最大调用堆栈大小超出错误

2 个答案:

演示：