时间戳

首页 > 解决方案 > 传单：遍历自定义标记的数据

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

问题描述

我需要您在 Leaflet 中使用自定义标记的帮助。我需要与数据条目对应的自定义标记。这是一个如下所示的数据样本csv：

结果 display_na 纬度 长
视听 14, Amsterdamer Straße, Leopoldkiez, 婚礼, Mitte, 柏林, 13347, 德国 13.3574034 52.5517197
VK Seestraße, 婚礼, Mitte, 柏林, 13351, 德国 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 种类型的标记

标记的颜色与行相对应result。如果 中的结果值csv是，AV那么标记应该是greenIcon。这就是想法。

比你的，期待你的建议！

标签： loopscsvleafletmarker

解决方案

你很亲密。首先，您需要一个三元或 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

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

演示

推荐阅读