一次保持一个传单侧边栏打开

Keeping one Leaflet sidebar open at a time

本文关键字：侧边栏 一次 一个      更新时间：2023-09-26

我正在做一个传单地图项目，上面有多个标记，可以打开相应的侧边栏(标记A打开侧边栏A，标记B打开侧边栏B等(这是代码希望实现此目的的原因：

.HTML

<div id="sidebar">
    <h1>Sidebar 1</h1>
</div>
<div id="sidebar-two">
    <h1>Sidebar 2</h1>
</div>

JavaScript：

 var sidebar = L.control.sidebar('sidebar', {
            closeButton: true,
            position: 'left'
        });
        map.addControl(sidebar);

    var marker = L.marker([51.2, 7]).addTo(map).on('click', function () {
        sidebar.toggle();
    });
    var sidebarTwo = L.control.sidebar('sidebar-two', {
        closeButton: true,
        position: 'left'
    });
    map.addControl(sidebarTwo);
    var marker = L.marker([52.2, 7]).addTo(map).on('click', function () {
        sidebarTwo.toggle();
    });

现在，我正在使用传单侧边栏插件，当我一次单击多个标记时，侧边栏会彼此重叠打开。

我想做的是，如果您单击标记A并且出现侧边栏A，

则可以单击标记B，它将关闭侧边栏A并引入侧边栏B。我希望这是可互换的，因此任何标记都会关闭当前打开的标记，并引入自己的侧边栏。这可能吗？我包含一个JSFIDDLE来显示基本地图，标记和侧边栏的外观。注意：您需要将演示窗口拉宽，才能在默认屏幕宽度上看到它。

该演示还包括插件的源代码。我已经摆弄了它，并有一种感觉，这个代码片段：

toggle: function () {
        if (this.isVisible()) {
            this.hide();
        } else {
            this.show();
        }
    },

可能是我的答案所在。我不确定。

您可以在点击功能中关闭其他侧边栏：

    var marker = L.marker([52.2, 7]).addTo(map).on('click', function () {
        if(sidebar.isVisible())
            sidebar.hide();
        sidebarTwo.toggle();
    });
相关文章：