Đặt điều khiển bên ngoài container bản đồ với Tờ rơi?

Ai đó có thể cho tôi biết làm thế nào tôi có thể đặt các điều khiển bên ngoài nội dung bản đồ bằng Tờ rơi không?

Trong trường hợp này, tôi chỉ muốn đặt điều khiển chuyển đổi lớp bên ngoài đối tượng bản đồ.

Tờ rơi thực hiện rất nhiều cách vẫy tay để che giấu việc thực hiện cổng thông tin bản đồ nhưng may mắn cho bạn là họ đã nghĩ ra một giải pháp!

Các getContainerchức năng chỉ là những gì bạn cần. Điều này trả về nút HTML thực tế, không chỉ là đánh dấu.

Sau đó, nó dễ dàng như việc không tạo con (?) Nút và gán nó cho cha mẹ mới, với một vài dòng Javascript.

Ví dụ làm việc và bình luận (và một lát đá ass-ass)!

http://codepen.io/romahicks/pen/ONmPmp

Mật mã

//Create Layer
var baseMap = new    L.TileLayer('http://{s}.tiles.mapbox.com/v3/gvenech.m13knc8e/{z}/{x}/{y}.png'   );

var baseMapIndex = {
  "Map": baseMap
};

// Create the map
var map = new L.map('map', {
  center: new L.LatLng(41.019829, 28.989864),
  zoom: 14,
  maxZoom: 18,
  zoomControl: false, // Disable the default zoom controls.
  layers: baseMap
});

// Create the control and add it to the map;
var control = L.control.layers(baseMapIndex);
control.addTo(map);

 // Call the getContainer routine.
 var htmlObject = control.getContainer();
 // Get the desired parent node.
 var a = document.getElementById('new-parent');

 // Finally append that node to the new parent, recursively searching out and re-parenting nodes.
 function setParent(el, newParent)
 {
    newParent.appendChild(el);
 }
 setParent(htmlObject, a);

Bạn phải đệ quy đi qua tất cả trẻ em và gán lại cho cha mẹ chúng. Xem câu trả lời thứ hai cho một vòng lặp đệ quy đơn giản.

/programming/20910147/how-to-move-all-html-element-children-to-another-parent-USE-javascript

Cách đơn giản có thể tôi đã sử dụng:

Thêm thẻ html bên dưới, nơi bạn muốn di chuyển các điều khiển tờ rơi:

<div id="custom-map-controls"></div>

Mã JavaScript:

$(document).ready(function () {

var newParent = document.getElementById('custom-map-controls');
        var oldParent = document.getElementsByClassName("leaflet-top leaflet-right")

        while (oldParent[0].childNodes.length > 0) {
            newParent.appendChild(oldParent[0].childNodes[0]);
        }
 });