在最大调用堆栈大小超出错误时自定义缩放控制结果

问题描述

我尝试在iOS上使用Google Maps JavaScript API时更改缩放增量。例如，我不希望从变焦14变为变焦15，而是直接缩放16，然后变焦18，等等......当用户使用捏来缩放手势时。

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

我得到使用 map.setZoom（zoom + 2）; 和 map.setZoom（zoom - 2）将超过最大调用堆栈大小 ; 分别在第17行和第19行添加。

检查此JSFiddle：。这是我需要帮助的部分：

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

顶部的按钮演示了我试图实现的功能，放大手势。

解决方案

简单的方法：

只设置一个新的缩放，当前的缩放不是偶数（这应该会停止无限循环）

  google.maps.event.addListener （map，'zoom_changed'，function（）{
 var z = this.getZoom（）; 
 if（z％2）{//当zoom是一个奇数时
 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）{//当zoom是一个奇数时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％;保证金：0; padding：0} #zoom {font：bold 2em等宽;背景：番茄;宽度：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>  

I'm trying to change the zoom increment when using Google Maps JavaScript API on iOS. For example, instead of going from zoom 14 to zoom 15, I would like for it to go straight to zoom 16 and then zoom 18, and so on... when a user uses the pinch to zoom gesture.

I know I can achieve this with buttons, but I can't seem to find a solution for pinch to zoom gesture. I realize that the zoom_changed event needs to be tracked.

I get an error of Maximum call stack size exceeded with map.setZoom(zoom + 2); and map.setZoom(zoom - 2); when added on line 17 and 19, respectively.

Check out this JSFiddle: http://jsfiddle.net/2zmn9173/4/. This is the part I need help with:

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

The buttons on top demonstrate the functionality I am trying to achieve, but with pinch to zoom gesture.

解决方案

Simple approach:

only set a new zoom when the current zoom is not a even number(this should stop the infinite loop)

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

---

Demo:

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>

这篇关于在最大调用堆栈大小超出错误时自定义缩放控制结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！