событие с щелчком мыши на отдельном маркере при использовании плакатного плаката markercluster

Question

Мой сайт состоит из карты листов с плагином sheetlet.markerclusters. Я также использую Flowplayer для воспроизведения видео, которое открывается в наложении JQuery Tools с использованием идентификатора селектора «# video1».

В настоящее время, когда я нажимаю на любой маркер на карте, он запускает тестовое видео в оверлее. Моя цель - создать событие клика, уникальное для каждого отдельного маркера в кластере. В конце концов, я хотел бы, чтобы каждый маркер имел событие click, которое запускает видео, уникальное для этого маркера.

Я новичок, и делаю все хорошо, используя эти хорошо документированные библиотеки до сих пор. Однако у меня нет навыков преодоления нынешнего разрыва. Кто-нибудь, пожалуйста, дайте мне толчок в правильном направлении? Ниже приведена ссылка на мой 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/

Answer 1

Вы движетесь в правильном направлении с функцией 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() потому, что данные имеют название капитализируются и идентификатор видео все в нижнем регистре.

Здесь находится в действии: http://jsfiddle.net/nM458/44/