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 に答える