Сделайте активным боковую панель Leaflet при нажатии маркера и наоборот

Question

Сделайте активным боковую панель Leaflet при нажатии маркера и наоборот

0

Какой лучший способ изменить элемент div на активный, когда вы нажимаете на маркер?

Как это сделать, когда у вас есть десятки или сотни маркеров?

Например, когда вы нажимаете маркер на карте листовка, как сделать так, чтобы связанный с ним элемент боковой панели был активным?

Я могу написать код sudo, но мне не хватает частей.

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

В основном, я пытаюсь подражать тому, что делают многие сайты каталога каталогов, такие как Yelp или Foursquare. Вы нажимаете на элемент списка боковой панели, и маркер становится активным, и наоборот. Это делает его таким пользователем и может читать информацию о маркере, видя, где находится место.

В Mapbox был классный (теперь устаревший) пример Foursquare. Я прошел через код для этого, но едва понял. Тем не менее, пример имеет смысл.

Когда вы наводите указатель на список в вихре, маркер становится черным.

Kyle Pennell 07 март 2014, в 19:17

Источник

Теги:

javascript

jquery

leaflet

map

2 ответа

Ещё вопросы

Pajaro5 · Answer 1 · 2014-06-16T16-05-00.000Z

Вы должны попробовать использовать плагин боковой панели, который очень прост в использовании. Я тестировал его с 4000 производителями, и он работает очень хорошо.

Вы можете найти его здесь: https://github.com/turbo87/leaflet-sidebar/

Brent Echols · Answer 2 · 2014-03-07T16-33-00.000Z

Это действительно зависит от того, как вы все сконструировали все, но при условии, что у вас есть pushpin карты, держите ссылку на боковую панель так или иначе, просто добавьте обработчик быстрого клика. Раньше я никогда ничего не делал с листовкой, но похоже, что они поддерживают все события, необходимые для маркеров: 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');
});

Надеюсь, это полезно!