Beschränken Sie den Min/Max-Zoom auf eine Bing Map mit v7 des AJAX-Steuerelements?

Question

Ich arbeite an einer Website, die v7 des Bing Maps AJAX Control verwendet. Eines der Dinge, die ich tun muss, ist das Einschränken des Zoomlevels, um zu verhindern, dass Benutzer über ein bestimmtes Level hinaus zoomen oder über ein bestimmtes Level hinauszoomen.

Ich habe eine "getZoomRange" -Methode für das Map-Objekt gefunden, nach der Überprüfung gibt es einfach ein Objektliteral mit den Eigenschaften "min" und "max" zurück. Also, ich dachte, Überladung würde es wahrscheinlich tun:

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

... aber nein. Es hat keine Auswirkung (es hat tatsächlich etwas mit dem Aussehen des Zoom-Schiebereglers zu tun, wenn das Standard-Dashboard verwendet wird).

Das Entführen des Ereignisses und das Verhindern des Fortfahrens scheint ebenfalls keine Auswirkungen zu haben.

Answer 1

Nach Bing Maps unterstützt, dem einzigen Weg, dies zu tun (was nicht besonders elegant ist, und führt zu einem gewissen unwillkommenen Jitter auf der Karte) ist wie folgt:

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

ich mit einem zu tun hatte ähnliches Problem und ich habe etwas gemacht, was sehr ähnlich zu dem ist, was MrJamin in seiner Antwort beschreibt, mit einem (subtilen, aber großen) Unterschied: Ich habe einen Handler für targetviewchanged hinzugefügt. Laut der official docs auf MSDN, 'targetviewchanged' occurs when the view towards which the map is navigating changes. Anstatt Map#getZoom anzurufen, habe ich auch Map#getTargetZoom verwendet, die returns the zoom level of the view to which the map is navigating ist. Beachten Sie, dass dieser Ansatz Jitter verhindert.

Hier ist die verkürzte Version meines 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

Ein anderer Weg, dies zu erreichen, ist das Ereignis geworfen zu handhaben, wenn das Mausrad bewegt wird. http://msdn.microsoft.com/en-us/library/gg427609.aspx

Wenn Sie das mousewheel Ereignis zu behandeln, können Sie prüfen, ob das Mausrad nach vorne oder nach hinten verschoben wird, und dann überprüfen Sie die map.targetZoom(), um mit einem min oder max Zoomwert zu vergleichen. Wenn die Mindest- oder Höchstwerte überschritten werden, setzen Sie event.handled = true. Dies verhindert, dass das Ereignis von anderen Handlern behandelt wird, was ein Standardverhalten verhindert. Aus der Dokumentation:

Ein boolescher Wert, der angibt, ob das Ereignis behandelt wird. Wenn diese Eigenschaft auf true festgelegt ist, wird das standardmäßige Kartensteuerungsverhalten für das Ereignis aufgehoben.

Siehe unten:

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