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

Leaflet.js: Linking Activities to Map Markers

本文关键字：地图 图标 链接 活动 js 传单      更新时间：2023-09-26

我正在使用Leaflet.js使用php从数据库中提取的latlng坐标在地图上显示标记。

我在左侧边栏上有一个活动列表，我想将它们与地图标记链接在一起。

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

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

这是一个链接，您可以在其中看到我所拥有的内容。

如果您能帮助我实现这一目标，我将不胜感激。

谢谢

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

创建标记和链接：

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

相关文章：