我的网站包含一个带有leaflet.markerclusters插件的Leaflet映射。我还使用Flowplayer播放使用选择器ID“#video1”在JQuery Tools叠加层中打开的视频。
目前,当我单击地图上的任何标记时,都会在叠加层中触发我的测试视频。我的目标是创建集群中每个单独标记唯一的click事件。最终,我希望每个标记都有一个单击事件,以触发该标记唯一的视频。
我是一个初学者,到目前为止一直在使用这些记录良好的库进行中。但是,我没有技巧来弥合当前的差距。有人能给我一个正确的方向吗?以下是我的JS小提琴的链接。我的问题开始于JavaScript第2098行。
var markers = new L.MarkerClusterGroup();
var addressPoints = [
[40.634902, -73.965054, "Video1"],
[40.660897, -73.961082, "Video2"],
[40.693353, -73.970413, "Video3"],
[40.693289, -73.966289, "Video4"],
[40.68973, -73.971007, "Video5"],
[40.718423, -73.957428, "Video6"],
[40.71817, -73.956918, "Video7"],
[40.681427, -73.993959, "Video8"]
];
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
//assign video div ID to overlay
$('#video1').overlay({
load: false,
top: "center",
left: "center"
});
//bind marker click event to overylay
markers.on('click', function () {
$("#video1").data("overlay").load();
});
谢谢,
乔伊
http://jsfiddle.net/Joey84/nM458/26/
最佳答案
使用markers.on("click"...
功能可以朝正确的方向前进。您只需要进行一些编辑。正如将事件侦听器添加到整个“标记”层一样,您可以将其添加到for循环中的各个标记中。
...
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
if (title=="Video1") {
marker.on('click', function () {
$("#video1").data("overlay").load();
});
}
marker.bindPopup(title);
markers.addLayer(marker);
}
...
同样(可能是更好的解决方案),您可以通过将变量传递给函数来访问有关在当前使用的
on("click"...
中单击的标记的详细信息。如果您有多个视频,并且不想在创建标记时使用if语句进行检查,这将非常有用。 markers.on('click', function (d) {
// Grab marker title and make it look like an ID
var marker_title = "#" + d.layer.options.title.toLowerCase();
// Make sure the jQuery object exists
if ( $(marker_title) ){
// Call up the video.
$(marker_title).data("overlay").load();
}
});
请注意,我使用
toLowerCase()
是因为您的数据标题大写且视频ID均为小写。它在起作用:
http://jsfiddle.net/nM458/44/