用于图标的 Papa Parse 和 Leaflet 集成

Question

我正在尝试使用 PapaParse 从 Google Sheets CSV 文件中提取 lat/lon 和一些用于在 Leaflet 中设置带有不同图标的标记的选项。一切似乎都工作正常。使用 CSV 中的正确颜色正确设置标记。问题是图标没有加载，即使控制台日志显示它们解析正确。

这是电子表格：https://docs.google.com/spreadsheets/d/1cGkXzVfq3gE5hRFEj9f2_ffKPjei57R3J99n_t0zy6M/edit?usp=sharing

这是完整的javascript：

 // URL for points CSV download
let pointsURL =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vSXery2RhtJDVQox_vzESecIMee9nsQZvs7j7IP6SI0huDOV7wSNX_2DEuKdHpR6jXs0Ft1sKukr5pG/pub?output=csv";
window.addEventListener("DOMContentLoaded", init);

// Map function
function init() {
    // Create map
    map = L.map("map").setView([40.749299,  -73.978141], 11);
    L.tileLayer(
      "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png",
      {
        maxZoom: 19,
      }
    ).addTo(map);

    //Parse google sheets
    Papa.parse(pointsURL, {
        download: true,
        header: true,
        complete: addPoints,
      });
    }

    //add points from CSV to the map
    function addPoints(data) {
        data = data.data;

    //create a layer group to add the points to
    let pointGroupLayer = L.layerGroup().addTo(map);
    let markerType = "marker";
    let markerRadius = 100;

    for (let row = 0; row < data.length; row++) {
        let marker;
        marker = L.marker([data[row].lat, data[row].lon]);

    //add custom icons from Google Sheet CSV
    console.log(data[row].color); 
    console.log(data[row].icon); 
    
    let icon = L.AwesomeMarkers.icon({
      icon: data[row].icon,
      markerColor: data[row].color,
      prefix: "fa"
    });
    marker.setIcon(icon);
    marker.addTo(pointGroupLayer);
    }
    }

icon: data[row].icon 似乎不起作用。如果我这样做 icon: "info-circle"，这也是我的 CSV 的方式，它就可以正常工作。 console.log(data[row].icon) 显示“信息圈”。有什么想法吗？

Answer 1

从 Sheet 中的图标字符串中删除 "。 "bicycle" 至 bicycle

也许它有空白，你需要 trim 图标字符串

用于图标的 Papa Parse 和 Leaflet 集成

Papa Parse and Leaflet integration for icons

javascript

leaflet

font-awesome

papaparse