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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

与注释相关的修复（缩放到鼠标位置）：

相关部分是projection_changed - 处理程序，在创建google.maps.Map - 实例

之后将其添加到某处

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：这将观察地图的scrollwheel - 属性，以便从一开始就将所需行为应用于scrollwheel - 地图选项{{ 1}}。如果要添加/删除行为，请稍后通过false设置scrollwheel属性：

set

Answer 2

所以有2个问题，

1）当前缩放级别+ 2可以超过20，这是谷歌地图支持的最大缩放级别。你应该确保它不会超过20。

2）设置缩放实际上会触发你的缩放变化监听器。因此，您应该放置一个标记或其他内容，以指示此缩放是由用户触发还是设置缩放级别

Answer 3

您可能超出了缩放尺寸范围。因此，

1.首先，请知道 mapObject.getZoom（）提供的缩放范围然后
2.仅当当前缩放尺寸低于范围2时，才使用条件将setZoom（）增加2。

例如，您所在区域的缩放范围是0-20，然后使用if条件检查当前缩放尺寸，如果不是> 18然后设置缩放尺寸=当前缩放尺寸+2
这将达到最多20 ....

if (map.getZoom() < 19) 
{
map.setZoom(map.getZoom() + 2); 
}

Answer 4

堆栈溢出是由您创建的递归函数的行为引起的。触发正常的鼠标滚轮操作时，会触发缩放，代码正在运行，并更改缩放，并且由于这会更改缩放，因此代码会一次又一次地运行。其他人提供的答案完成了这项工作。但要在鼠标点进行缩放，首先需要平移地图，将鼠标位置放在div区域的中心。

Answer 5

我在这上面浪费了很多时间，提供的所有代码都是正确的，但也是不必要的，因为默认情况下鼠标滚动是假的，您需要使用 ctrl + 滚轮告诉我该功能已经存在并且无需像提供的所有答案一样创建函数，它非常非常简单：

 function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(-19.257753, 146.823688),
        zoom: 2,
        scrollwheel: true,
        mapTypeId: 'terrain'
    });

在谷歌插入提供的函数中，屁股滚轮缩放默认为false 滚轮：真的，和缩放级别 2 无需数小时的编码！

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

5 个答案: