使用传单markercluster插件时点击单个标记点击事件

我的网站包含一个带leaflet.markerclusters插件的Leaflet地图。我还使用Flowplayer播放使用选择器ID“＃video1”在JQuery Tools叠加层中打开的视频。使用传单markercluster插件时点击单个标记点击事件

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

我是一名初学者，至今一直在使用这些记录良好的库。但是，我没有技能来弥补目前的差距。请有人给我一个正确的方向推？下面是我的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/

来源

2013-03-14 user2163278

您与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-10 16:43:42 patsweet

使用传单markercluster插件时点击单个标记点击事件

回答

相关问题