Question

我正在开发一个使用Bing Maps AJAX Control v7的网站。我需要做的一件事是限制缩放级别，以防止用户放大超过某个级别，或缩小超过一定级别。

我在Map对象上找到了一个“getZoomRange”方法，在检查它之后，它只返回一个具有“min”和“max”属性的对象文字。因此，我认为重载它可能会成功：

// "map" is our Bing Maps object
map.getZoomRange = function ()
{
  return {
    max:      14
    min:      5
  };
};

......但没有。它没有任何效果（它实际上与使用默认仪表板时缩放滑块的外观有关）。

劫持事件并阻止它继续进行似乎也没有效果。

Answer 1

根据Bing Maps的支持，唯一的方法（不是特别优雅，并在地图上产生一些不受欢迎的抖动）如下：

// "map" is our Bing Maps object, overload the built-in getZoomRange function
// to set our own min/max zoom
map.getZoomRange = function ()
{
  return {
    max:      14,
    min:      5
  };
};

// Attach a handler to the event that gets fired whenever the map's view is about to change
Microsoft.Maps.Events.addHandler(map,'viewchangestart',restrictZoom);

// Forcibly set the zoom to our min/max whenever the view starts to change beyond them 
var restrictZoom = function ()
{
  if (map.getZoom() <= map.getZoomRange().min) 
  {
    map.setView({
      'zoom':       map.getZoomRange().min,
      'animate':    false
    });
  }
  else if (map.getZoom() >= map.getZoomRange().max) 
  {
    map.setView({
      'zoom':       map.getZoomRange().max,
      'animate':    false
    });
  }
};

Answer 2

我正在处理一个类似的问题，最后我做了一些非常类似于MrJamin在他的回答中描述的东西，有一个（微妙的，但主要的）差异：我为targetviewchanged添加了一个处理程序。根据MSDN上的official docs，'targetviewchanged' occurs when the view towards which the map is navigating changes。另外，我使用了Map#getZoom Map#getTargetZoom而不是调用returns the zoom level of the view to which the map is navigating。注意，这种方法可以防止抖动。

这是我的代码的缩短版本：

function restrictZoom(map,min,max) {
  Microsoft.Maps.Events.addHandler(map,'targetviewchanged',function(){
    var targetZoom = map.getTargetZoom();
    var adjZoom = targetZoom;

    if(targetZoom > max) {
      adjZoom = max;
    } else if(targetZoom < min) {
      adjZoom = min;
    }

    if(targetZoom != adjZoom) {
      map.setView({zoom:adjZoom});
    }
  });
}

Answer 3

实现此目的的另一种方法是处理移动鼠标滚轮时抛出的事件。 http://msdn.microsoft.com/en-us/library/gg427609.aspx

当您处理mousewheel事件时，您可以检查鼠标滚轮是向前还是向后滚动，然后检查map.targetZoom()以便与最小或最大缩放值进行比较。如果超过最小值或最大值，则设置event.handled = true。这可以防止任何其他处理程序处理事件，从而防止默认行为。来自文档：

指示是否处理事件的布尔值。如果这个属性是设置为true，该事件的默认地图控件行为是取消。

见下文：

var Zoom = {
    MAX: 10,
    MIN: 2
}

var mouseWheelHandler = function(event) {

    // If wheelDelta is greater than 0, then the wheel is being scrolled forward which zooms in
    if(event.wheelDelta > 0) {
        if(map.getTargetZoom() >= Zoom.MAX) {
            event.handled = true;
        }                        
    }
    else {
        if(map.getTargetZoom() <= Zoom.MIN) {
            event.handled = true;
        }

    }
}

Microsoft.Maps.Events.addHandler(map, 'mousewheel', mouseWheelHandler);

使用AJAX控件的v7限制Bing地图上的最小/最大缩放？

3 个答案: