Leaflet.js为标记分配ID及在聚合簇中新增/移除标记的问题

• 语法错误：你尝试用var marker[user_id] = L.marker()的方式声明变量不符合JS语法，无法正确存储标记与用户ID的映射关系
• 逻辑漏洞：现有代码未过滤非在线用户，当用户状态不为YES时，marker变量未初始化，后续操作会抛出未定义错误
• 标识缺失：未给标记绑定用户ID属性，也未给标记DOM元素设置唯一可识别ID，无法单独定位标记

你需要提前声明一个全局对象用来存储用户ID与对应标记的映射，同时修正逻辑漏洞，给标记和DOM元素都加上唯一标识，完整修改后的代码如下：

// 提前声明全局对象，存储user_id与对应marker的映射
const markerMap = {};

var map = L.mapbox.map('map')
      .setView([52.450439, -1.729660], 14)
      .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

var markers = new L.MarkerClusterGroup();

for (var i = 0; i < addressPoints.length; i++) {
    var a = addressPoints[i];
    var online_status = a[3];
    var user_id = a[2];
    var imgts = a[2];
    var title = a[2];

    // 仅处理在线用户
    if (online_status === "YES") {
        var client = L.divIcon({
            className: 'location-pin',          
            // 修复img标签ID的语法错误，加上用户ID后缀保证唯一
            html: `<img id="operatorimg_${user_id}" src="img/${imgts}.jpg"><div class="pin online" id="pin_${user_id}"><div class="pulse"></div>`,
            iconSize: [30, 30],
            iconAnchor: [18, 30]
        });
        
        var marker = L.marker(new L.LatLng(a[0], a[1]), {
            icon: client,
            title: title
        });
        // 给marker本身绑定用户ID属性，方便后续识别
        marker.userId = user_id;
        // 存入全局映射对象
        markerMap[user_id] = marker;

        marker.bindPopup(title);
        markers.addLayer(marker);
    }
}

map.addLayer(markers);

• 删除指定用户ID的标记：

const userId = '101';
if(markerMap[userId]) {
    markers.removeLayer(markerMap[userId]);
    // 同时删除映射里的记录
    delete markerMap[userId];
}

• 修改指定用户ID的标记样式：

const userId = '105';
// 直接通过DOM ID修改样式
document.getElementById(`pin_${userId}`).classList.add('busy-status');
// 或者更换标记的icon
if(markerMap[userId]) {
    const newIcon = L.divIcon({
        // 自定义新的icon配置
    });
    markerMap[userId].setIcon(newIcon);
}

内容的提问来源于stack exchange，提问作者KidfromCov