[英]Leaflet.js: Linking Activities to Map Markers
我正在使用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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.