Question

有没有办法将多个DOM元素附加到使用L.control创建的DOM？

基本上，我想将 distanceFilterContainer 和 elevationFilterContainer 元素放在容器元素中。我怎么能做到这一点？

<div  id="distanceFilterContainer">
<input type="checkbox">
.
.
<input type="checkbox">
</div>

<div id="elevationGainFilterContainer">
<input type="checkbox">
.
.
<input type="checkbox">
</div>

<script>
var distanceFilter = L.control({position:'topleft'});
var elevationGainFilter = L.control({position:'topleft'});

distanceFilter.onAdd = function(mymap){
    this._div = L.DomUtil.get('distanceFilterContainer')
    return this._div
}

elevationGainFilter.onAdd = function(mymap){
    this._div = L.DomUtil.get('elevationGainFilterContainer')
    return this._div    
}

distanceFilter.addTo(mymap)
elevationGainFilter.addTo(mymap)
</script>

Answer 1

我没有测试但是这个想法就在这里你必须按ID定位div并附加到使用createElement创建的新动态div并将此div附加到BODY。

var distanceFilter = L.control({position:'topleft'});
var elevationGainFilter = L.control({position:'topleft'});

distanceFilter.onAdd = function(mymap){
    this._div = L.DomUtil.get('distanceFilterContainer')
    return this._div
}

elevationGainFilter.onAdd = function(mymap){
    this._div = L.DomUtil.get('elevationGainFilterContainer')
    return this._div    
}

//create container
var body = document.body;
var container = document.createElement('div');
var div1 = document.getElementById('distanceFilterContainer');
var div2 = document.getElementById('elevationGainFilterContainer');
container.className = "youcontainerclassCSS";
container.appendChild(div1);
container.appendChild(div2);
body.appendChild(container);
distanceFilter.addTo(mymap)
elevationGainFilter.addTo(mymap)

Answer 2

为什么不简单地将元素嵌入容器中？

<div id="map"></div>

<div id="filtersContainer">
  <div  id="distanceFilterContainer">
    <input type="checkbox">. . <input type="checkbox">
  </div>
  <div id="elevationGainFilterContainer">
    <input type="checkbox">. . <input type="checkbox">
  </div>
</div>

<script>
// ...
var filtersContainer = L.control({position:'topleft'});

filtersContainer.onAdd = function(mymap){
    this._div = L.DomUtil.get('filtersContainer')
    return this._div
}

filtersContainer.addTo(map)
</script>

如何在Leaflet控件中附加多个DOM？

2 个答案: