Javascript 传单.js:将活动链接到地图标记

Javascript 传单.js:将活动链接到地图标记,javascript,php,leaflet,Javascript,Php,Leaflet,我正在使用ployate.js在地图上显示标记,使用php从数据库中拉入latlng坐标 我在左侧边栏上有一个活动列表,我想将这些活动与地图标记链接在一起 我对此有困难: 如果您将鼠标悬停/单击侧边栏上的某个活动,则正确的标记将执行某些操作,例如弹出窗口或漂亮的动画 这里是一个链接,你可以看到我有什么 如果你能帮我实现这一目标,我将不胜感激 谢谢您可以在链接中留下对标记的引用,反之亦然。检查以下示例: 创建标记和链接: var marker = new L.Marker([0, 0]).bin

我正在使用ployate.js在地图上显示标记,使用php从数据库中拉入latlng坐标

我在左侧边栏上有一个活动列表,我想将这些活动与地图标记链接在一起

我对此有困难: 如果您将鼠标悬停/单击侧边栏上的某个活动,则正确的标记将执行某些操作,例如弹出窗口或漂亮的动画

这里是一个链接,你可以看到我有什么

如果你能帮我实现这一目标,我将不胜感激


谢谢

您可以在链接中留下对标记的引用,反之亦然。检查以下示例:

创建标记和链接:

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

这里有一个例子:

太棒了,好的,谢谢。然而,我如何让它跨多个链接工作,这些链接是使用php动态生成的?这就是我输出标记的方式。marker=new L.marker(在客户端生成链接和标记。否则会变得相当混乱。使用XHR从服务器端获取标记数据,并在客户端使用JS进行处理。保持整洁。我在回答中添加了一个示例。链接早就死了。OP已经两年没有登录了