0

私は地図アプリケーションで作業しており、さまざまなイベントをさまざまな種類のマーカーにリンクする必要があります。createMarkers 関数は、いくつかのマーカーをランダムに作成しますが、それらのオーバーレイ イベントは、色は異なりますが、常にまったく同じことを示します。これは Leaflet.js 上に構築されています

    function createMarkers() {
            for( var i = 0; i < 10; i++ ) {
                var color, kind;
                switch(Math.floor(Math.random() * 4)) {
                    case 0:
                        color = greenFlag;
                        kind = "film";
                    break;
                    case 1:
                        color = redFlag;
                        kind = "music";
                    break;
                    case 2:
                        color = blueFlag;
                        kind = "images";
                    break;
                    case 3:
                        color = yellowFlag;
                        kind = "text";
                    break;
                    default:
                }
                var lat = Math.random() * 3 - 75;
                var lng = Math.random() * 3 - 112;
                var marker = L.marker([lat, lng], {icon: color}).addTo(map).on('click', function() {
                    overlay(kind);
                });
            }
        }

    function overlay(kind) {
            alert(kind);
        }

作成されたすべてのマーカーは、クリックすると同じ値になります (例: 「フィルム」)。最初のswitchステートメント内の変数にオーバーレイ（種類）を保存して、それを呼び出してみました。また、marker.on('click') 関数で 2 番目の switch ステートメントを作成しようとしましたが、どちらも問題を解決していません。ここで、javascript/objects に関するかなり重要なものが欠けているように感じます。

ありがとうございました！

4

1 に答える 1

1

外部関数のスコープが保持されるように、クロージャを作成する必要があります。

function createMarkers() {

        for( var i = 0; i < 10; i++ ) {
            var color, kind;
            switch(Math.floor(Math.random() * 4)) {
                case 0:
                    color = greenFlag;
                    kind = "film";
                break;
                case 1:
                    color = redFlag;
                    kind = "music";
                break;
                case 2:
                    color = blueFlag;
                    kind = "images";
                break;
                case 3:
                    color = yellowFlag;
                    kind = "text";
                break;
                default:
            }
            var lat = Math.random() * 3 - 75;
            var lng = Math.random() * 3 - 112;
            var marker = L.marker([lat, lng], {icon: color}).addTo(map).on('click',overlay(kind));
        }
    }

function overlay(kind) {
  return function(){
        alert(kind);
  }
}
于 2013-05-23T08:53:50.847 に答える