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') 函数中创建第二个 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 回答