javascript - 在 L.marker 中使用迭代器

Question

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);
};</code></pre>
</div>
</div>

Answer 1

这是典型的 JavaScript var 作用域/闭包问题。

TL; DR:只需将 var value 替换为 const value，问题就会消失。

在 JavaScript 中，var 是 function 范围的，因此您的 value 变量在所有 for 循环迭代中都是相同的(但它的值是在每次迭代中改变)。在循环结束时，它的值为最后一个i - 1。

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

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