Question

我正在使用多个标记创建一个Leaflet地图项目，这些标记会打开相应的侧边栏（markerA打开sidebarA，markerB打开sidebarB等）。这就是代码实现此目的：

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();
    });

现在，我正在使用Leaflet sidebar plugin，当我一次点击几个标记时，侧边栏会相互打开。

我想要做的是，如果您单击markerA并出现sidebarA，您可以单击markerB，它将关闭sidebarA并引入sidebarB。我希望这是可以互换的，所以任何标记都会关闭当前打开的标记带来自己的侧边栏。这可能吗？我已经添加了JSFIDDLE来显示基本地图，标记和侧边栏的外观。 注意：您需要将演示窗口拉得更宽，以便在默认的屏幕宽度上看到它。

该演示还包括插件的源代码。我已经摆弄它并感受到这段代码片段：

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

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

Answer 1

您可以关闭onclick功能中的其他侧边栏：

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

一次打开一个Leaflet侧边栏

1 个答案: