使用Leaflet将控件放置在地图容器外部吗？

有人可以告诉我如何使用Leaflet将控件放置在地图内容之外吗？

在这种情况下，我只想将图层开关控件放置在地图对象之外。

leaflet

— 毛里西奥·桑托斯
source

Leaflet花费了大量精力来隐藏地图门户的实现，但幸运的是，他们已经想到了解决方案！

该getContainer功能正是您所需要的。这将返回实际的HTML节点，而不仅仅是标记。

然后，就像取消子节点（？）并使用几行Javascript将其分配给新的父节点一样容易。

工作示例和注释（还有踢砖瓦）！

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

— 罗马
source

辛苦了已经投票赞成您，但是您介意在答案中添加相关的JavaScript吗？

— elrobis

a.appendChild(control.onAdd(map))应该足够了。又见stackoverflow.com/questions/36041651/...

— ghybs

它与getContainer解决方案配合良好。但是当我尝试使用a.appendChild（control.onAdd（map））时，所有wms图层和图层控件都消失了。

— 莫里西奥·桑托斯

很抱歉，我使用递归循环更新了答案以获取孩子。请告诉我这是否无效。

— 罗玛'16

@mauriciosantos我不好，它不能简单地用于L.control.layers。

— ghybs

我用过的简单方法：

在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]);
        }
 });

— 拉胡尔·马哈迪克（Rahul Mahadik）
source