Giới hạn zoom tối thiểu/tối đa trên Bản đồ Bing với v7 của điều khiển AJAX?

Question

Tôi đang làm việc trên một trang web sử dụng v7 của Điều khiển AJAX của Bản đồ Bing. Một trong những điều tôi cần làm là hạn chế mức thu phóng để ngăn người dùng phóng to qua một mức nhất định hoặc thu nhỏ qua một mức nhất định.

Tôi đã tìm thấy phương thức "getZoomRange" trên đối tượng Map, sau khi kiểm tra nó, nó chỉ trả về một đối tượng theo nghĩa đen với thuộc tính "min" và "max". Vì vậy, tôi thấy quá tải nó có thể sẽ làm các trick:

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

... nhưng no. Nó không có hiệu lực (nó thực sự có một cái gì đó để làm với sự xuất hiện của thanh trượt zoom khi sử dụng Bảng điều khiển mặc định).

Tấn công sự kiện và ngăn sự kiện đó tiếp tục dường như không có hiệu lực.

Answer 1

Theo hỗ trợ Bing Maps, cách duy nhất để làm điều này (mà không phải là đặc biệt thanh lịch, và kết quả là một số jitter không được hoan nghênh trên bản đồ) như sau:

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

Tôi đã làm việc với một vấn đề tương tự và tôi đã làm một cái gì đó rất giống với những gì MrJamin mô tả trong câu trả lời của mình, với một sự khác biệt (tinh tế, nhưng lớn): tôi đã thêm một trình xử lý cho targetviewchanged. Theo số official docs trên MSDN, 'targetviewchanged' occurs when the view towards which the map is navigating changes. Ngoài ra, thay vì gọi số Map#getZoom, tôi đã sử dụng Map#getTargetZoom mà returns the zoom level of the view to which the map is navigating. Lưu ý, cách tiếp cận này ngăn cản jitter.

Dưới đây là phiên bản rút gọn của mã của tôi:

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

Một cách khác để đạt được điều này là để xử lý các sự kiện ném khi các bánh xe chuột được di chuyển. http://msdn.microsoft.com/en-us/library/gg427609.aspx

Khi bạn xử lý các sự kiện mousewheel, bạn có thể kiểm tra xem các bánh xe chuột đang được cuộn tới hoặc lui và sau đó kiểm tra map.targetZoom() để so sánh với một phút hoặc giá trị zoom tối đa. Nếu min hoặc max bị vượt quá, hãy đặt event.handled = true. Điều này ngăn không cho sự kiện bị xử lý bởi bất kỳ trình xử lý nào khác ngăn cản hành vi mặc định. Từ tài liệu:

Boolean cho biết liệu sự kiện có được xử lý hay không. Nếu thuộc tính này là được đặt thành true, hành vi kiểm soát bản đồ mặc định cho sự kiện là bị hủy.

Xem dưới đây:

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