¿Restringe el zoom mínimo/máximo en un mapa de Bing con la v7 del control AJAX?

Question

Estoy trabajando en un sitio que hace uso de la v7 del control Bing Maps AJAX. Una de las cosas que debo hacer es restringir el nivel de zoom a fin de evitar que los usuarios hagan un acercamiento más allá de cierto nivel, o alejarse un cierto nivel.

Encontré un método "getZoomRange" en el objeto Map, después de inspeccionarlo, simplemente devuelve un objeto literal con las propiedades "min" y "max". Entonces, pensé que sobrecargarlo probablemente sería suficiente:

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

... pero no. No tiene ningún efecto (en realidad tiene algo que ver con la apariencia del control deslizante del zoom cuando se utiliza el Tablero predeterminado).

Secuestrar el evento y evitar que continúe también parece no tener ningún efecto.

Answer 1

De acuerdo con el apoyo de Bing Maps, la única manera de hacer esto (que no es particularmente elegante, y da como resultado alguna fluctuación no deseada en el mapa) es el siguiente:

// "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

que estaba tratando con una problema similar y terminé haciendo algo muy similar a lo que MrJamin describe en su respuesta, con una diferencia (sutil, pero importante): agregué un controlador para targetviewchanged. De acuerdo con official docs en MSDN, 'targetviewchanged' occurs when the view towards which the map is navigating changes. Además, en lugar de llamar al Map#getZoom, utilicé Map#getTargetZoom que returns the zoom level of the view to which the map is navigating. Tenga en cuenta que este enfoque evita la inestabilidad.

Aquí está la versión abreviada de mi código:

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

Otra forma de lograr esto es para controlar el evento lanzado cuando la rueda del ratón se mueve. http://msdn.microsoft.com/en-us/library/gg427609.aspx

Cuando maneje el evento mousewheel, se puede comprobar si la rueda del ratón se está desplazando hacia delante o hacia atrás, y luego comprobar la map.targetZoom() con el fin de comparar con un valor de zoom min o max. Si se excede el mínimo o el máximo, configure event.handled = true. Esto evita que el evento sea manejado por cualquier otro controlador que impida el comportamiento predeterminado. De la documentación:

Un booleano que indica si se manejó el evento. Si esta propiedad es establecida en verdadero, el comportamiento de control de mapa predeterminado para el evento es cancelado.

ver más abajo:

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