วางตัวควบคุมนอกคอนเทนเนอร์แผนที่ด้วย Leaflet หรือไม่

มีคนบอกฉันได้อย่างไรว่าฉันจะวางการควบคุมนอกเนื้อหาแผนที่ด้วย Leaflet ได้อย่างไร

ในกรณีนี้ฉันแค่ต้องการวางสวิตช์ควบคุมเลเยอร์นอกวัตถุแผนที่

Leaflet ทำมือโบกมือให้มากเพื่อซ่อนการใช้งานพอร์ทัลแผนที่ แต่โชคดีสำหรับคุณที่พวกเขาคิดถึงวิธีแก้ปัญหา!

getContainerฟังก์ชั่นเป็นเพียงสิ่งที่คุณต้องการ สิ่งนี้จะส่งคืนโหนด HTML จริงไม่ใช่แค่มาร์กอัป

จากนั้นเป็นเรื่องง่ายเหมือนการยกเลิกการสร้าง (?) โหนดและกำหนดให้ผู้ปกครองใหม่ด้วย Javascript สองบรรทัด

ตัวอย่างการทำงานและความคิดเห็น (และชุดไพ่ kick-ass)!

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

รหัส

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

คุณต้องผ่านลูก ๆ ซ้ำ ๆ และมอบหมายให้พ่อแม่ของพวกเขาซ้ำ ดูคำตอบที่สองสำหรับการวนซ้ำแบบง่ายๆ

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

วิธีที่ง่ายที่สุดที่ฉันเคยใช้:

เพิ่มแท็ก html ด้านล่างซึ่งคุณต้องการย้ายการควบคุมแผ่นพับ:

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

รหัส 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]);
        }
 });