Leaflet Sidebar-V2 显示在地图上方，而不是地图内部-解网

问：

我一直在使用侧边栏 v2 作为我正在做的地图，我有一些方法可以解决这个问题，但我不明白为什么侧边栏出现在上方而不是地图内。这是它显示它的人的照片

这是我的HTML：

<body>
    
    <div id="sidebar" class="sidebar collapsed sidebar-left leaflet-touch">
        <!-- Nav tabs -->
        <div class="sidebar-tabs">
            <ul role="tablist">
                <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
                <li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
                <li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
                <li><a href="https://github.com/Turbo87/sidebar-v2" role="tab"><i class="fa fa-github"></i></a></li>
            </ul>

            <ul role="tablist">
                <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
            </ul>
        </div>

        <!-- Tab panes -->
        <div class="sidebar-content">
            <div class="sidebar-pane" id="home">
                <h1 class="sidebar-header">
                    sidebar-v2
                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                </h1>

                <p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
            </div>

            <div class="sidebar-pane" id="profile">
                <h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
            </div>

            <div class="sidebar-pane" id="messages">
                <h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
            </div>

            <div class="sidebar-pane" id="settings">
                <h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
            </div>
        </div>
    </div>

    <div class="sidebar-map" id="soy_el_mapa" ></div>
    
    <script src="js_mapa.js"></script>
</body>



</html>

侧边栏的 js 部分是这样的

var sidebar = L.control.sidebar({
        autopan:false,
        closeButton: true,
        container: 'sidebar',
        position: 'left'
    }).addTo(soy_el_mapa);

谢谢！

我想知道我做错了什么，并知道如何使用侧边栏解决此问题

JavaScript 宣传册侧边栏 folium

Leaflet Sidebar-V2 显示在地图上方，而不是地图内部

leaflet sidebar-v2 shows above the map and not inside it

评论