Leaflet Markercluster - 将持久数据写入每个标记

Question

我有一个通过 leaflet 实现的地图，有一个按钮可以将地图的边界发送到服务器，服务器又用一组元素响应我。每个元素都有一个纬度、一个经度和一个唯一的 id。

我从服务器得到的大概是这样的：

[{
    "poi_marker": "redMarker.png",
    "poi_id": 412, //this is my unique ID
    "poi_pos": {
        "lat": 17.53243,
        "lng": 14.52353
        }
},...]

到目前为止，我的代码如下所示：

function createAndAddMarker(prefill) {
    let marker = createMarker(prefill.poi_pos, prefill.poi_marker);

    map.addLayer(marker);
    marker._icon.dataset.uniqueId = prefill.poi_id;

    return marker;
}

function createMarker(coords, iconUrl) {
    let redMarker = L.icon({
        iconUrl: iconUrl,
        iconSize: [20, 32], // size of the icon
        iconAnchor: [10, 32], // point of the icon which will correspond to marker's location
    });

    let createdMarker = new L.marker(coords, {
        draggable: true,
        zIndexOffset: 101,
        icon: redMarker
    });

    return createdMarker;
}

效果很好！现在我尝试实现 leaflet.markercluster 第一个函数看起来非常相似：

function createAndAddMarker(prefill) {
    let marker = createMarker(prefill.poi_pos, prefill.poi_marker);

    clusterLayer.addLayer(marker); //clusterLayer = layer that got created & added a when map did
    marker._icon.dataset.uniqueId = prefill.poi_id;

    return marker;
}

但是已经有 2 个问题了。

并非所有标记都实际绘制到地图上，因为有些标记已经聚集在一起。对于这些未绘制的项目，行 marker._icon.dataset.uniqueId = prefill.poi_id 将抛出错误，因为它无法找到 "marker._icon" 因为只要未绘制，标记似乎就没有图标。
绘制的标记会在其上写入 uniqueId，但如果我缩小并使它们也聚在一起，原始标记+图标会从 DOM 中移除并重新添加当我再次放大时。不幸的是，它在没有我的唯一 ID 的情况下被重新添加，所以我不知道如何持久地 link 具有唯一 ID 的标记。

每次点击标记时，我都需要获取相应的唯一 ID，但不知道如何实现。

非常感谢您的意见！

如果有什么不清楚的地方请告诉我，我会尽量澄清。

提前致谢！

Answer 1

如您所见，当 Leaflet.markercluster 插件需要隐藏标记时（例如，如果它成簇或远离），传单标记图标可能会从 DOM 中删除/重新创建从视口）。

因此向该图标附加数据很麻烦。

但是您还有其他几种方法可以将数据附加到标记，如 Leaflet: Including metadata with CircleMarkers:

中所述

直接到标记对象
在创建标记时的选项中
到标记特征属性

您不一定需要使用 DOM 对象的数据集来附加您的 JavaScript 数据。

Leaflet Markercluster - 将持久数据写入每个标记

Leaflet Markercluster - write persistent data to each marker

javascript

leaflet

leaflet.markercluster