0

私はこのコードを持っています:

siteCheckboxes.each(function () {

        var lat = $(this).attr("lat");
        var lng = $(this).attr("lng");
        var myLatlng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({ icon: smallDotIcon, position: myLatlng, map: map, title: $(this).attr("siteName") });
        var $checkbox = $(this);
        $(this).click(function () {
            if ($(this).attr("checked")) {

              marker.setIcon(null);  
            } else {
               marker.setIcon(smallDotIcon);

            }

        });
        google.maps.event.addListener(marker, 'click', function () {
              $checkbox.click();
        });


    });

アイデアは、サイトの名前が付いたいくつかのチェックボックスと、マップ上の各サイトに小さな点が付いたマップがあるということです。ユーザーがサイトのチェックボックスをオンにすると、マップ上のマーカーが完全なマーカーに変わります。アプリケーションのこの部分は正常に動作します。

ユーザーがマーカーをクリックすると、関連するチェックボックスのステータスとマーカーの形状が変化するはずですが、機能しません。

ユーザーがマーカーをクリックすると、チェックボックスがオンの状態になり、マーカーの形状が同期しなくなりました。何が問題ですか?

一部のデバッグでは、ユーザーがマーカーをクリックすると、マーカーのクリック イベントが呼び出され、関連するチェックボックスのクリック イベントも呼び出されますが、チェックボックスのクリック イベントが終了するとチェック状態が変化します。

クリックイベントが終了した後に変更されるのはなぜですか?

4

1 に答える 1

0

問題は、すべてのチェックボックスをループして、クリック ハンドラーを作成していることです。ただし、ユーザーが任意のマーカーをクリックすると、マーカー イベントリスナーを作成したときの値ではなく、常に $checkbox の最後の値が使用されます。

閉鎖が必要です。

代わりにこのようなことを試してください。.each ループを使用して、新しい最上位関数bindClickを作成します。.each ループで、その関数を呼び出します。これにより、その時点でループしているチェックボックスを使用してイベントリスナーが作成されます。

siteCheckboxes.each(function () {
    var lat = $(this).attr("lat");
    var lng = $(this).attr("lng");
    var myLatlng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({ icon: smallDotIcon, position: myLatlng, map: map, title: $(this).attr("siteName") });
    var $checkbox = $(this);


    bindClick($checkbox, marker);
});


function bindClick(checkbox, marker) {
    google.maps.event.addListener(marker, 'click', function () {
          checkbox.click();
    });
}
于 2012-09-04T09:12:37.080 に答える