javascript - 使 Leaflet 侧边栏 div 在标记单击时处于事件状态，反之亦然

Question

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

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

例如，当您点击Leaflet map 上的标记时，如何使其相关的侧边栏元素处于事件状态？

我可以编写 sudo 代码，但我缺少一些内容。

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

基本上，我试图模仿 Yelp 或 Foursquare 等许多 map 目录网站的做法。单击侧边栏列表项，标记将变为事件状态，反之亦然。这使得用户可以在查看位置的同时读取有关标记的信息。

Mapbox 有一个很酷的(现已弃用的)Foursquare 示例。我浏览了代码，但几乎不明白它。也就是说，这个例子说明了要点。

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

Answer 1

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

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

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');
});

希望这对您有帮助!