3

我的网站包含一个带有 leaflet.markerclusters 插件的 Leaflet 地图。我还使用 Flowplayer 播放使用选择器 ID“#video1”在 JQuery 工具覆盖中打开的视频。

目前，当我点击地图上的任何标记时，它会在叠加层中触发我的测试视频。我的目标是为集群中的每个单独的标记创建一个唯一的点击事件。最终，我希望每个标记都有一个点击事件，该事件会触发该标记独有的视频。

我是一个初学者，到目前为止，使用这些有据可查的库一直做得很好。但是，我没有能力弥补目前的差距。有人可以给我推动正确的方向吗？下面是我的 JS Fiddle 的链接。我的问题从 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/

4

1 回答 1

6

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/

于 2013-04-10T16:43:42.900 回答