在 L.marker 中使用迭代器

我试图为每个标记绑定一个 onClick 来调用一个函数，该函数将与该标记关联的数据填充到页面上的元素中，但迭代器（i）似乎正在覆盖自身（每个标记的行为就好像它是最后一个标记一样）迭代），但仅当在与标记关联的 onClick 函数中使用时。我在其他地方都按预期工作。忽略 console.log 行，我只是想跟踪变量中断的位置。任何帮助，将不胜感激。

var markers = L.markerClusterGroup({maxClusterRadius: 100, disableClusteringAtZoom: 9});

function addMarkers(data, dataset, h) {
    // Create a new marker cluster group
    var popup = '';

    // Loop through data
    for (var i = 0; i < Object.keys(data).length; i++) {
        // Set the data location property to a variable
        var lat = data[i].latitude;
        var lon = data[i].longitude;
        var location = [lat, lon];
        var value = i-1;

        // Check for location property
        if (location) {
            if (dataset.icon == bigfootIcon) {
                popup = `${data[i].date}<br/>
                            ${data[i].county}, ${data[i].state}<br/><br/>
                            ${data[i].title}`;
            } else if (dataset.icon == ufoIcon) {
                popup = `${data[i].date}<br/>
                            ${data[i].city}, ${data[i].state}<br/><br/>
                            ${data[i].title}`;
            } else if (dataset.icon == dogmanIcon) {
                popup = `${data[i].date}<br/>
                            ${data[i].location}, ${data[i].state_abbrev}`;
            } else if (dataset.icon == hauntedIcon) {
                popup = `${data[i].location}<br/>
                            ${data[i].city}, ${data[i].state_abbrev}`
            };
        };

        // Add a new marker to the cluster group and bind a pop-up
        var marker = L.marker(location, {icon: dataset.icon}).bindPopup(popup).on('click', function() {
            // onToggle(dataset);
            // var value = i-1;
            console.log(data[value]);
            onChange(data[value], dataset, h)
        });
        // console.log(marker);
        marker.addTo(markers);
    };

    // Add our marker cluster layer to the map
    map.addLayer(markers);
};

// Called elsewhere to prep for calling the onChange function from a dropdown
function dropdownChange(response, dataset, h) {
    var dropdown = dataset.dropdown;
    var value = dropdown.property('value');

    console.log(value);

    dropdown.on('change', function() {
        onChange(response[value], dataset, h);
    });
};

function onChange(response, dataset, h) {
    var dropdown = dataset.dropdown
    value = dropdown.property('value');
    console.log(value);
    console.log(response)
    document.getElementById('summaryText').style.display = 'block';
    document.getElementById('summaryText').style.maxHeight = `calc(100% - ${h}px)`;

    stats.html('');

    if (dropdown == datasets[0].dropdown) {
        stats.html(`<p>Location: ${response.county}, ${response.state}<br/>
                        Date: ${response.date}<br/>
                        Classification: ${response.classification}<br/>
                        <br/>
                        Incident:</p>`);
    } else if (dropdown == datasets[1].dropdown) {
        stats.html(`<p>Location: ${response.city}, ${response.state}<br/>
                        Date: ${response.date}<br/>
                        Duration: ${response.duration}<br/>
                        Shape: ${response.shape}<br/>
                        <a href='${response.report_link}' target="_blank">Report Link</a><br/>
                        <br/>
                        Incident:</p>`);
    } else if (dropdown == datasets[2].dropdown) {
        stats.html(`<p>Location: ${response.location}, ${response.state_abbrev}<br/>
                        Date: ${response.date}<br/>
                        <br/>
                        Incident:</p>`);
    } else if (dropdown == datasets[3].dropdown) {
        stats.html(`<p>Location: ${response.city}, ${response.state_abbrev}<br/>
                        <br/>
                        Incident:</p>`);
    };

    summaryText.text('');
    summaryText.text(response.summary);
    map.flyTo([response.latitude, response.longitude], 15);
};

这是一个经典的 JavaScriptvar范围/关闭问题。

TL; DR: 更换即可var value by const value这个问题应该消失了。

在 JavaScript 中，var is function范围，因此你的value变量在所有 for 循环迭代中都是相同的（但其值在每次迭代中都会更改）。循环结束时，其值为最后一个i - 1.

然后在所有标记单击事件监听器的关闭中，但它们都引用完全相同的value多变的。

With const关键字，您现在有一个block作用域变量，与其他编程语言更相似。它对于每个循环迭代都是唯一的，并且每个标记单击侦听器都有自己的value在其关闭中。