在标记单击时使 Leaflet 侧边栏 div 处于活动状态，反之亦然答案

【问题标题】：Make Leaflet sidebar div active on marker click and vice versa在标记单击时使 Leaflet 侧边栏 div 处于活动状态，反之亦然
【发布时间】：2014-03-07 17:17:39
【问题描述】：

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

当你有几十个或几百个标记时如何做到这一点？

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

我可以编写 sudo 代码，但我缺少部分内容。

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

基本上，我试图模仿许多地图目录网站（如 Yelp 或 Foursquare）所做的事情。您单击侧边栏列表项，标记变为活动状态，反之亦然。这使得用户可以在查看地点位置的同时阅读有关标记的信息。

Mapbox 有一个很酷（现已弃用）的 Foursquare 示例。我为此浏览了代码，但几乎没有理解它。也就是说，这个例子说明了重点。

当您在 yelp 中将鼠标悬停在列表项上时，标记变为黑色。

【问题讨论】：

标签： javascript jquery map leaflet

【解决方案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');
});

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

【讨论】：

它不是一个解决方案。你需要提供一个没有这个插件的解决方案