Restreindre le zoom min/max sur une carte Bing avec la v7 du contrôle AJAX?

Question

Je travaille sur un site qui utilise la v7 du contrôle AJAX de Bing Maps. Une des choses que je dois faire est de restreindre le niveau de zoom afin d'empêcher les utilisateurs de zoomer après un certain niveau, ou de faire un zoom arrière après un certain niveau.

J'ai trouvé une méthode "getZoomRange" sur l'objet Map, après l'avoir inspecté, il renvoie simplement un littéral d'objet avec les propriétés "min" et "max". Donc, j'ai pensé que le surcharger ferait probablement l'affaire:

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

... mais pas. Il n'a aucun effet (il a en fait quelque chose à voir avec l'apparence du curseur de zoom lors de l'utilisation du tableau de bord par défaut).

Le piratage de l'événement et son blocage semblent également n'avoir aucun effet.

Answer 1

D'après le support Bing Maps, la seule façon de le faire (ce qui est particulièrement élégant, et se traduit par une certaine instabilité indésirable sur la carte) est la suivante:

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

j'affaire à un problème similaire et j'ai fini par faire quelque chose de très similaire à ce que MrJamin décrit dans sa réponse, avec une différence (subtile, mais majeure): J'ai ajouté un gestionnaire pour targetviewchanged. Selon le official docs sur MSDN, 'targetviewchanged' occurs when the view towards which the map is navigating changes. Aussi, au lieu d'appeler Map#getZoom, j'ai utilisé Map#getTargetZoom qui returns the zoom level of the view to which the map is navigating. Notez que cette approche empêche la gigue.

est ici la version abrégée de mon code:

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

Une autre façon d'y parvenir est de gérer l'événement est déplacé levée lorsque la roulette de la souris. http://msdn.microsoft.com/en-us/library/gg427609.aspx

Lorsque vous gérez l'événement mousewheel, vous pouvez vérifier si la molette de la souris est défilée avant ou en arrière, puis vérifiez la map.targetZoom() afin de comparer avec une valeur min ou de zoom max. Si les valeurs min et max sont dépassées, définissez event.handled = true. Cela empêche l'événement d'être géré par d'autres gestionnaires, ce qui empêche le comportement par défaut. De la documentation:

Un booléen indiquant si l'événement est géré. Si cette propriété est définie sur , le comportement de contrôle de carte par défaut de l'événement est annulé.

Voir ci-dessous:

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