在标记点击时激活Leaflet侧边栏div，反之亦然

Question

单击标记时将div元素更改为活动状态的最佳方法是什么？

当您有数十个或数百个标记时，如何执行此操作？

例如，当您单击Leaflet地图上的标记时，如何设置它以使与其相关的侧边栏元素处于活动状态？

我可以写sudo代码，但我很遗憾。

markers on click
$(#sidebar div)
   make (related) li element active

基本上，我试图模仿像Yelp或Foursquare这样的很多地图目录网站。单击侧栏列表项，标记变为活动状态，反之亦然。这使得它成为一个用户，并且可以在查看地点的位置时阅读有关标记的信息。

Mapbox有一个很酷的（现已弃用）Foursquare示例。我仔细阅读了代码，但几乎无法理解。也就是说，这个例子得到了重点。

当你在yelp中鼠标悬停一个listitem时，标记会变黑。

Answer 1

这实际上取决于你如何构建所有内容，但假设你有地图图钉以某种方式保持侧边栏的参考，只需添加一个快速点击处理程序。我以前从未对传单做过任何事情，但看起来它们支持标记所需的所有事件：http://leafletjs.com/reference.html#marker。

因此，当您构建每个标记时，只需存储其相应的菜单项，并将事件绑定如下所示！

marker.on('mouseover', function () {
    //Write code to adjust the icon
    marker.icon = someNewIcon;

    //Store a ref. to the menu item, and use that ref here to manage the view state
    currentActive.removeClass('active');
    $(this.target).addClass('active');
});

希望这有用！

Answer 2

你应该尝试使用侧边栏插件，它非常简单易用。我用4000个制造商对它进行了测试，效果非常好。

你可以在这里找到它： https://github.com/turbo87/leaflet-sidebar/