javascript — Leaflet.js: привязка действий к маркерам карты

Question

javascript — Leaflet.js: привязка действий к маркерам карты

Я использую Leaflet.js для отображения маркеров на карте, используя координаты latlng, извлеченные из базы данных с помощью php.

У меня есть список действий на левой боковой панели, с которым я хотел бы связать их с маркерами карты вместе.

У меня возникли трудности с этим:
Если бы вам нужно было навести курсор мыши на какое-либо действие на боковой панели, то правильный маркер сделал бы что-то, например всплывающее окно или хорошую анимацию.

http://meteaydin.co.uk/tourism/itinerary.php

Вот ссылка, где вы можете увидеть, что у меня есть.

Если бы вы могли помочь мне в достижении этого, я был бы очень признателен.

Спасибо

0

javascript leaflet php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете оставить ссылки на свои маркеры в своих ссылках и наоборот. Проверьте следующий пример:

Создать маркер и ссылку:

var marker = new L.Marker([0, 0]).bindPopup('My popup').addTo(map);
link = L.DomUtil.create('a', 'my-link', document.body);

link.href = '#';
link.textContent = 'My link';

Создайте ссылки друг на друга:

link.marker = marker;
marker.link = link;

Затем добавьте события в вашу ссылку и используйте ссылку на маркер в обработчиках:

L.DomEvent.addListener(link, 'mouseover', function () {
this.marker.openPopup();
});

L.DomEvent.addListener(link, 'mouseout', function () {
this.marker.closePopup();
});

И это также работает наоборот, прикрепите обработчики к маркеру и используйте ссылку, чтобы сделать что-то:

marker.on('mouseover', function () {
L.DomUtil.addClass(this.link, 'hover');
});

marker.on('mouseout', function () {
L.DomUtil.removeClass(this.link, 'hover');
});

Вот пример: http://plnkr.co/edit/gInjWxd84RhPsbIIW4ct?p=preview

1