Ograniczać minimalne/maksymalne powiększenie mapy Bing za pomocą v7 kontrolki AJAX?

Question

Pracuję nad witryną korzystającą z wersji 7 Kontrolki AJAX Bing Maps. Jedną z rzeczy, które muszę zrobić, to ograniczyć poziom powiększenia, aby uniemożliwić użytkownikom przybliżenie się do określonego poziomu lub pomniejszyć o określony poziom.

Znalazłem metodę "getZoomRange" na obiekcie Map, po jej sprawdzeniu zwraca po prostu literał obiektu z właściwościami "min" i "max". Pomyślałem więc, że przeładowanie tego może zdziałać:

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

... ale nie. Nie ma żadnego efektu (ma to coś wspólnego z wyglądem suwaka powiększenia podczas korzystania z domyślnego pulpitu).

Przejęcie zdarzenia i uniemożliwienie jego kontynuacji również nie przynosi żadnego efektu.

Answer 1

Według wsparcia Bing Maps, jedynym sposobem, aby to zrobić (co nie jest szczególnie elegancki, a wyniki w niektórych niepożądanego jittera na mapie) przedstawia się następująco:

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

miałem do czynienia z podobny problem i skończyłem robiąc coś bardzo podobnego do tego, co MrJamin opisał w swojej odpowiedzi, z jedną (subtelną, ale istotną) różnicą: dodałem program obsługi dla targetviewchanged. Zgodnie z official docs na MSDN, 'targetviewchanged' occurs when the view towards which the map is navigating changes. Ponadto, zamiast wywoływać numer Map#getZoom, użyłem Map#getTargetZoom, który jest returns the zoom level of the view to which the map is navigating. Uwaga: to podejście zapobiega drganiom.

Oto skrócona wersja mojego kodu:

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

Innym sposobem osiągnięcia tego celu jest obsłużyć zdarzenia rzucony gdy kółko myszy zostanie przeniesiony. http://msdn.microsoft.com/en-us/library/gg427609.aspx

Jeśli obsłużyć zdarzenia mousewheel, można sprawdzić, czy koło mysz jest przewijane do przodu lub do tyłu, a następnie sprawdzić map.targetZoom() w celu porównania z min lub max wartości powiększenia. Jeśli min lub max są przekroczone, ustaw event.handled = true. Zapobiega to obsłużeniu zdarzenia przez inne programy obsługi, które uniemożliwiają zachowanie domyślne. Z dokumentacji:

Wartość logiczna wskazująca, czy zdarzenie jest obsługiwane. Jeśli ta właściwość ma wartość ustawioną na wartość true, domyślne zachowanie kontroli mapy dla zdarzenia jest anulowane .

Patrz poniżej:

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