传单：遍历自定义标记的数据

Question

我需要你帮助我使用 Leaflet 中的自定义标记。我需要与数据条目相对应的自定义标记。这是一个数据样本 csv，看起来像这样：

result	display_na	lat	long
AV	14, Amsterdamer Straße, Leopoldkiez, Wedding, Mitte, Berlin, 13347, Deutschland	13.3574034	52.5517197
VK	Seestraße, Wedding, Mitte, Berlin, 13351, Deutschland	52.541301	13.3341968

这是我现在的代码

// create 3 types of markers in 3 colors

var LeafIcon = L.Icon.extend({
  options: {
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
  },
});

// Read markers data from data.csv
$.get("./data.csv", function (csvString) {
  // Use PapaParse to convert string to array of objects
  var data = Papa.parse(csvString, { header: true, dynamicTyping: true }).data;

  var greenIcon = new LeafIcon({ iconUrl: "greeb.png" }),
    yellowIcon = new LeafIcon({ iconUrl: "yellow.png" }),
    redIcon = new LeafIcon({ iconUrl: "red.png" });

  // For each row in data, create a marker and add it to the map
  // For each row, columns `Latitude`, `Longitude`, and `Title` are required
  for (var i in data) {
    var row = data[i];

    var marker = L.marker([row.lat, row.long], {
      opacity: 1,
    }).bindPopup(row.display_na);

    L.marker([row.lat, row.long])
      .addTo(map)
      .bindPopup(row.display_na)
      .openPopup();
  }
});

它不起作用。你能告诉我我的失败在哪里吗？我有 3 种标记

绿色图标
黄色图标
redIcon

标记的颜色与行 result 相对应。如果 csv 中的结果值为 AV，则标记应为 greenIcon。就是这个主意。

谢谢你，期待你的建议！

Answer 1

你很接近。首先，您需要一个三元或 if 语句来检查 csv 的结果值，正如您在实例化标记时提到的那样。它接受一个对象，该对象具有一些选项，包括图标键。使用它你可以定义一个不同于预定义的图标

for (var i in data) {
          var row = data[i];

     const marker = L.marker([row.lat, row.long], {
        icon: row.result === "AV" ? greenIcon : blueIcon
     })
     .addTo(map)
     .bindPopup(row.display_na)
     .openPopup();
 }

此外，您的 csv 格式应为：

result,display_na,lat,long
AV,14 Amsterdamer Straße Leopoldkiez Wedding Mitte Berlin 13347 Deutschland,52.5517197,13.3574034
VK,Seestraße Wedding Mitte Berlin 13351 Deutschland,52.541301,13.3341968

只有在分隔每列值时才需要使用逗号，否则将被视为不同的列值。

Demo

传单：遍历自定义标记的数据

Leaflet: iterate through data for custom markers

csv

loops

marker

leaflet