使用 Leaflet 侧边栏 V2 使用单独的地图标记切换多个侧边栏

Question

使用 Sidebar V2 (https://github.com/Turbo87/sidebar-v2) 我已经成功地创建了一个侧边栏并有一个 (leaflet.js) 地图标记，它使用 '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();
});

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

使用补充工具栏 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 完成。

有什么想法吗？

Answer 1

您必须稍微更改函数 toggleSidebar，以便它采用侧边栏的 ID：

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

然后是召唤

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

假设您在边栏上有一个事件处理程序（您的代码中没有），您也可以在处理程序中使用：

toggleSidebar(this.id);

它可能无法开箱即用，可能您必须调整一些细节才能正常工作，但我希望基本思想很清楚。

使用 Leaflet 侧边栏 V2 使用单独的地图标记切换多个侧边栏

Toggle multiple sidebars with separate map markers using Leaflet sidebar V2

javascript

leaflet