在 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],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,h) {
    var dropdown = dataset.dropdown;
    var value = dropdown.property('value');

    console.log(value);

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

function onChange(response,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);
};

解决方法

这是一个经典的 JavaScript var 范围/闭包问题。

TL; DR：只需将 var value 替换为 const value，问题就应该消失了。

在 JavaScript 中，var 是函数作用域，因此您的 value 变量在所有 for 循环迭代中都是相同的（但它的值在每次迭代中都会改变）。在循环结束时，它的值为最后一个 i - 1。

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

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

,

我不确定这是否有效，但尝试将值直接添加到标记中，然后在 click 函数中（从标记中）读出它：

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