使用 Sidebar V2 (https://github.com/Turbo87/sidebar-v2) 我设法创建了一个侧边栏并打开了一个 (leaflet.js) map 标记并使用“toggleSidebar”功能关闭侧边栏。

var sidebar = L.control.sidebar('sidebar').addTo(map);
var sidebarDiv = document.getElementById('sidebar');

toggleSidebar = function() {
  if (hasClass(sidebarDiv,'collapsed')) {
    sidebar.open();
  } else {
    sidebar.close();
  }
}

function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

var map = L.map("map");
map.setView([51.2, 7], 9);

// MARKER 1: ENGLAND
var marker = L.marker([52.5868, -2.1257], 
    {title: 'test', 
    riseOnHover: true, 
    autoPanOnFous: true,
    maxZoom: 28}
    ).addTo(map).on('click', function () {
    toggleSidebar();
});

查看上面的代码，我的“标记”似乎无法访问侧边栏元素 ID，这就是为什么我正在努力创建第二个打开/关闭第二个侧边栏的标记。

使用 Sidebar v1 我可以执行以下操作：

var marker1 = L.marker([52.6369, -1.1398], 
    {title: 'United Kingdom', 
    riseOnHover: true, 
    autoPanOnFous: true,
    maxZoom: 28}
    ).addTo(map).on('click', function () {
    sidebar1.toggle();
});

..所以每个标记都可以连接到每个单独的侧边栏，但这不能用 v2 完成。

有任何想法吗？

toggleSidebar = function(ID) {
  let sidebarDiv = document.getElementById(ID);
  if (hasClass(sidebarDiv,'collapsed')) {
    sidebar.open();
  } else {
    sidebar.close();
  }
}

toggleSidebar('sidebar1');
toggleSidebar('sidebar2');

toggleSidebar(this.id);