javascript - 循环中的 Leaflet MarkerCluster bindPopup 仅使用最后一个值

Question

我使用 Leaflet MarkerCluster 库编写了此代码片段，并且我尝试使用 bindPopUp 方法以编程方式为每个标记分配不同的消息:

  var markers = L.markerClusterGroup();

  for (const [key, value] of Object.entries(data['Company Name'])) {
    var temp = {};
    temp['ESG Risk Score'] = 1/data['ESG Risk Score'][key];
    temp['Coordinates'] = [data['Latitude'][key], data['Longitude'][key]];
    temp['Market Cap'] = String(data['Market Cap'][key]).replace(/\B(?=(\d{3})+(?!\d))/g, ",");;
    temp['Company Name'] = value;
    var message = "<p>ESG score: " + data['ESG Risk Score'][key] + "</p><p>Company Name: " + temp['Company Name'] + "</p><p>Market Capital $: " + temp['Market Cap'];
    markers.addLayer(L.marker(temp["Coordinates"])).bindPopup(message).addTo(myMap);
  }

我遇到的问题是最后一条消息绑定(bind)到 map 上的所有标记。

有没有办法不让每个弹出窗口被循环中的最后一个值覆盖？

谢谢!

Answer 1

由于您放置括号的方式不同，您将 bindPopup 方法应用于您的 markers MarkerClusterGroup 而不是您的个人 Marker:

markers.addLayer(L.marker(temp["Coordinates"])).bindPopup(message)

...应该是:

markers.addLayer(L.marker(temp["Coordinates"]).bindPopup(message))

注意:您可以通过仅在循环之后立即将所有标记添加到 MCG(使用 addLayers)，或者仅在循环之后将 MCG 添加到 map 来提高性能。