在标记点击时激活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/