Wie kann ich mehr als ein DOM an ein Leaflet-Steuerelement anhängen?

Question

Gibt es eine Möglichkeit, mehr als ein DOM-Element an ein DOM anzuhängen, das mit L.control erstellt wurde?

Grundsätzlich möchte ich sowohl platzieren distanceFilterContainer und elevationFilterContainer Elemente innerhalb eines Behälters Element. Wie kann ich das erreichen?

<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

ich nicht getestet haben, aber die Idee ist, hier müssen Sie Ihre div von ID Ziel und den neuen dynamischen div mithilfe von create erstellt anhängen und diese div zu BODY anhängen.

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

Warum betten Sie Ihre Elemente einfach in einen Container ein?

<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>