自定义滚轮在Google地图中缩放

Question

您可以自定义Google地图中的滚轮缩放吗？如果用户使用鼠标滚轮,我希望地图缩放2或3级.可能吗？

在这里查看我的jsFiddle:http://jsfiddle.net/jj7ymt5c/1/

我在控制台中收到以下错误: Uncaught RangeError: Maximum call stack size exceeded

这是代码:

function initializeMap() {
    map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 14,
        center: new google.maps.LatLng(42.35210605281608, -83.12983274459839),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    google.maps.event.addListener(map, 'zoom_changed', function () {
        map.setZoom(map.getZoom() + 2);
    });
}

Answer 1

您可以禁用内置滚轮缩放并实现自己的处理程序:

function initializeMap() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
      zoom: 14,
      scrollwheel: false,
      center: new google.maps.LatLng(42.35210605281608, -83.12983274459839),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }),
    fx = function(e) {
      e.preventDefault();
      var z = (e.wheelDelta > 0 || e.detail < 0) ? 3 : -3;
      map.setZoom(Math.max(0, Math.min(22, map.getZoom() + z)));
      return false;
    };
  google.maps.event.addDomListener(map.getDiv(), 'mousewheel', fx);
  google.maps.event.addDomListener(map.getDiv(), 'DOMMouseScroll', fx);
  
}

google.maps.event.addDomListener(window, 'load', initializeMap);

html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

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

与注释相关的修复(缩放到鼠标位置):

相关部分是projection_changed-handler,在创建google.maps.Map-instance 之后将其添加到某处

function initializeMap() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
      zoom: 7,
      scrollwheel:false,
      center: new google.maps.LatLng(42.352, -83.129)
    });
  
  
  google.maps.event.addListenerOnce(map,'projection_changed',function(){
      
      var steps=3,//the desired zoom-steps on each mousescroll 
          goo = google.maps,
          map = this,
          div = map.getDiv();
      goo.event.addListener(map,'scrollwheel_changed',function(){
      
      var evs = this.get('wheelevents');
      if(this.get('scrollwheel')){
         if(evs){
            for(var k in evs){
              goo.event.removeListener(evs[k])
            }
         }
         this.set('wheelevents',{})
      }
      else{
         var fx = function(e) {
              e.preventDefault();
              var target  = e.target || e.srcElement;
              
              if(target.parentNode.parentNode.parentNode!==div){
                return;
              }        
              
              var rect    = target.getBoundingClientRect(),
                  dir     = ((e.wheelDelta > 0 || e.detail < 0) ? 1 : -1)*steps,
                  zoom    = Math.max(0, Math.min(25, map.getZoom() + dir)),
                  fz      = Math.pow(2,map.getZoom()),
                  mo      = { x:  e.clientX - rect.left,
                              y:  e.clientY - rect.top},
                  co      = { x:  div.offsetWidth/2,
                              y:  div.offsetHeight/2},
                  cp  = map.getProjection().fromLatLngToPoint(map.getCenter()),
                  mc  = map.getProjection()
                             .fromPointToLatLng(new google.maps.Point(
                             (cp.x*fz-(target.offsetWidth/2-mo.x))/fz
                             ,
                             (cp.y*fz-(target.offsetHeight/2-mo.y))/fz
                             )),
                  mp= map.getProjection().fromLatLngToPoint(mc),
                  __zoom,__fz,__cp;
              
              map.setZoom(zoom);
              __zoom=map.getZoom();
              __fz=Math.pow(2,__zoom)
              __cp=new google.maps.Point(
                (mp.x+(co.x-mo.x)/__fz)
                ,
                (mp.y+(co.y-mo.y)/__fz)
              );
              map.setCenter(map.getProjection().fromPointToLatLng(__cp))
              return false;
            };
            
         this.set('wheelevents',
                  {
                    mousewheel: goo.event.addDomListener(div, 
                                                        'mousewheel', fx),
                    mousescroll:goo.event.addDomListener(div, 
                                                        'DOMMouseScroll', fx)
                  }
                 );
      }
    });
    goo.event.trigger(map,'scrollwheel_changed')
  });  

}

google.maps.event.addDomListener(window, 'load', initializeMap);

html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

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

注意:这将观察scrollwheel地图的属性,以便从一开始就将scrollwheel地图的-option 设置为应用所需的行为false.如果要添加/删除行为,请稍后通过set以下方式设置scrollwheel属性:

map.set('scrollwheel',true);//or false