Cách xác định vị trí kiểm soát thu nhỏ của tờ rơi ở vị trí mong muốn

Question

Tôi muốn đặt điều khiển thu phóng ở giữa bên phải của bản đồ, tức là ở giữa phía bên phải của bản đồ. Tôi đã tìm thấy giải pháp cho đặt sự kiểm soát zoom ở các góc khác nhau bằng cách sử dụng đoạn mã sau

var map = new L.map("map-container",{ zoomControl: false }); 

    new L.Control.Zoom({ position: 'topleft' }).addTo(map); 

Vì vậy, các vị trí có thể

topleft 
topright 
bottomleft 
bottomright 

Nhưng mục tiêu của tôi là đưa cửa sổ điều khiển ở bên phải ở giữa. Hoặc thậm chí tôi đặt điều khiển ở góc tôi muốn thêm một số lề lên trên cùng. Làm thế nào tôi có thể làm điều đó? Có ý tưởng nào không?

Answer 1

Một giải pháp khác (và có thể sạch hơn) sẽ là tạo thêm (các) trình giữ chỗ Điều khiển bổ sung, ngoài 4 góc được cung cấp.

Một lợi thế tốt đẹp là nó cho phép đặt một số Điều khiển ở một trong các trình giữ chỗ đó. Họ sẽ ngăn xếp mà không chồng chéo, như trong các góc tiêu chuẩn.

JavaScript:

// Create additional Control placeholders 
function addControlPlaceholders(map) { 
    var corners = map._controlCorners, 
     l = 'leaflet-', 
     container = map._controlContainer; 

    function createCorner(vSide, hSide) { 
     var className = l + vSide + ' ' + l + hSide; 

     corners[vSide + hSide] = L.DomUtil.create('div', className, container); 
    } 

    createCorner('verticalcenter', 'left'); 
    createCorner('verticalcenter', 'right'); 
} 
addControlPlaceholders(map); 

// Change the position of the Zoom Control to a newly created placeholder. 
map.zoomControl.setPosition('verticalcenterright'); 

// You can also put other controls in the same placeholder. 
L.control.scale({position: 'verticalcenterright'}).addTo(map); 

Sau đó, nó trở nên dễ dàng phong cách những placeholders với CSS, bởi vì cha mẹ DOM của họ là container chính bản đồ. Do đó, top, bottom, left và right có thể được xác định theo tỷ lệ phần trăm (sử dụng thứ nguyên của phụ huynh).

CSS:

.leaflet-verticalcenter { 
    position: absolute; 
    top: 50%; /* possible because the placeholder's parent is the map */ 
    transform: translateY(-50%); /* using the CSS3 Transform technique */ 
    padding-top: 10px; 
} 

.leaflet-verticalcenter .leaflet-control { 
    margin-bottom: 10px; 
} 

Đối với vertical centering giữ chỗ riêng của mình, bạn có thể sử dụng kỹ thuật mà bạn yêu thích. Ở đây tôi đã sử dụng CSS3 Transform để bù đắp phần giữ chỗ bằng một nửa chiều cao của nó.

Nếu cần thiết (ví dụ: đối với khả năng tương thích của trình duyệt cũ), bạn có thể sử dụng phương pháp "tính toán khi tải" để thực hiện bù đắp này, tương tự như của iH8. Nhưng bạn không còn cần phải chạy nó trên bản đồ thay đổi kích thước, chỉ khi thêm mới Control (s) để giữ chỗ.

Demo: http://jsfiddle.net/ve2huzxw/8/

Answer 2

Lấy chiều cao vùng chứa của bản đồ, chia cho hai. Trừ chiều cao vùng chứa của thu phóng, chia cho hai. Sử dụng định vị tuyệt đối và giao cho vị trí hàng đầu:

var mapHalfHeight = map.getSize().y/2, 
    container = map.zoomControl.getContainer(), 
    containerHalfHeight = parseInt(container.offsetHeight/2), 
    containerTop = mapHalfHeight - containerHalfHeight + 'px'; 

container.style.position = 'absolute'; 
container.style.top = containerTop; 

Ví dụ trên Plunker: http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

Lưu ý rằng khi bạn không sử dụng một container đồ kích thước cố định mà bạn sẽ cần phải làm điều này mỗi khi bản đồ container được thay đổi kích thước. Ném nó vào một phương pháp và móc nó lên đến sự kiện thay đổi kích thước của bản đồ như trong ví dụ được cung cấp.

Answer 3

Điều này có thể được thực hiện một chút dễ dàng hơn, với một dòng CSS. Hoạt động với thiết kế đáp ứng (Bootstrap) và di chuyển các nút bổ sung được thêm vào với Leaflet.EasyButton.

.leaflet-control-container { position: absolute; right: 56px }