传单带有过滤器的动态图标

Question

我正在尝试使用leaflet-simple-csv-master创建一个地图（我是初学者）。这真的很好，我想用我的类型显示不同的图标（例如学校的1个图标，管理部门的图标，......）。当我有地图时，我成功地展示了我的不同图标但是当我点击过滤器时，我的图标消失了。实际上它不起作用，因为当我使用过滤器时它无法识别我的变量，我可以读到我的img不再是logos / type1.png而是logos / undefined.png。

这是我的全部代码。

var basemap = new L.TileLayer(baseUrl, {maxZoom: 17, attribution: baseAttribution, subdomains: subdomains, opacity: opacity});

var center = new L.LatLng(0, 0);

var map = new L.Map('map', {center: center, zoom: 2, maxZoom: maxZoom, layers: [basemap]});

var popupOpts = {
autoPanPadding: new L.Point(5, 50),
autoPan: true
};

var points = L.geoCsv (null, {
firstLineTitles: true,
fieldSeparator: fieldSeparator,
onEachFeature: function (feature, layer) {
    var popup = '<div class="popup-content"><table class="table table-striped table-condensed">';
    for (var clave in feature.properties) {
        var title = points.getPropertyTitle(clave).strip();
        var attr = feature.properties[clave];
        if (title == labelColumn) {
            layer.bindLabel(feature.properties[clave], {className: 'map-label'});
        }
        if (attr.indexOf('http') === 0) {
            attr = '<a target="_blank" href="' + attr + '">'+ attr + '</a>';
        }
        if (attr) {
            popup += '<tr><th>'+title+'</th><td>'+ attr +'</td></tr>';
        }
    }
    popup += "</table></popup-content>";
    layer.bindPopup(popup, popupOpts);
},
pointToLayer: function (feature, latlng) {
  var logo = feature.properties['type'];
  return L.marker(latlng, {
      icon:L.icon({
          iconUrl: 'logos/'+logo+'.png',
          shadowUrl: 'marker-shadow.png',
          iconSize: [25,41],
          shadowSize:   [41, 41],
          shadowAnchor: [13, 20]
      })
  });
},
filter: function(feature, layer) {
    total += 1;
    if (!filterString) {
        hits += 1;
        return true;
    }
    var hit = false;
    var lowerFilterString = filterString.toLowerCase().strip();
    $.each(feature.properties, function(k, v) {
        var value = v.toLowerCase();
        if (value.indexOf(lowerFilterString) !== -1) {
            hit = true;
            hits += 1;
            return false;
        }
    });
    return hit;
}
});

var hits = 0;
var total = 0;
var filterString;
var markers = new L.MarkerClusterGroup();
var dataCsv;


var addCsvMarkers = function() {
hits = 0;
total = 0;
filterString = document.getElementById('filter-string').value;

if (filterString) {
    $("#clear").fadeIn();
} else {
    $("#clear").fadeOut();
}

map.removeLayer(markers);
points.clearLayers();

markers = new L.MarkerClusterGroup(clusterOptions);
points.addData(dataCsv);
markers.addLayer(points);

map.addLayer(markers);
try {
    var bounds = markers.getBounds();
    if (bounds) {
        map.fitBounds(bounds);
    }
} catch(err) {
    // pass
}
if (total > 0) {
    $('#search-results').html("Showing " + hits + " of " + total);
}
return false; 
};

var typeAheadSource = [];

function ArrayToSet(a) {
var temp = {};
for (var i = 0; i < a.length; i++)
    temp[a[i]] = true;
var r = [];
for (var k in temp)
    r.push(k);
return r;
}

function populateTypeAhead(csv, delimiter) {
var lines = csv.split("\n");
for (var i = lines.length - 1; i >= 1; i--) {
    var items = lines[i].split(delimiter);
    for (var j = items.length - 1; j >= 0; j--) {
        var item = items[j].strip();
        item = item.replace(/"/g,'');
        if (item.indexOf("http") !== 0 && isNaN(parseFloat(item))) {
            typeAheadSource.push(item);
            var words = item.split(/\W+/);
            for (var k = words.length - 1; k >= 0; k--) {
                typeAheadSource.push(words[k]);
            }
        }
    }
}
}

if(typeof(String.prototype.strip) === "undefined") {
String.prototype.strip = function() {
    return String(this).replace(/^\s+|\s+$/g, '');
};
}

map.addLayer(markers);




$(document).ready( function() {
$.ajax ({
    type:'GET',
    dataType:'text',
    url: dataUrl,
    contentType: "text/csv; charset=utf-8",
    error: function() {
        alert('Error retrieving csv file');
    },
    success: function(csv) {
        dataCsv = csv;
        populateTypeAhead(csv, fieldSeparator);
        typeAheadSource = ArrayToSet(typeAheadSource);
        $('#filter-string').typeahead({source: typeAheadSource});
        addCsvMarkers();
    }
});

$("#clear").click(function(evt){
    evt.preventDefault();
    $("#filter-string").val("").focus();
    addCsvMarkers();
});

});