Faltblatt: Wie verwende ich einen benutzerdefinierten Marker auf einer Geojson-Ebene?

Ich versuche, eine Geojson-Karte auf eine Flugblattkarte zu setzen, und alles funktioniert einwandfrei, bis ich den Standard-Blu-Marker verwende.

Jetzt möchte ich einen benutzerdefinierten Marker (ein kleines PNG-Symbol) verwenden und habe meinen Code im Folgenden geändert

 var my_json;
 $.getJSON('../Dati/my-geojson.geojson', function(data) {
           my_json = L.geoJson(data, {
            pointToLayer: function(feature, latlng) {
                var smallIcon = L.Icon({
                    options: {
                        iconSize: [27, 27],
                        iconAnchor: [13, 27],
                        popupAnchor:  [1, -24],
                        iconUrl: 'icone/chapel-2.png'
                    }
                });
                return L.marker(latlng, {icon: smallIcon});
            },
           onEachFeature: function (feature, layer) {
                   layer.bindPopup(feature.properties.ATT1 + '<br />'
                                                 + feature.properties.ATT2);
           }
         });
 my_json.addTo(markers.addTo(map));
 TOC.addOverlay(my_json, "My layer name in TOC");
 map.removeLayer(my_json); 
 });

Der Fehler, den ich in Firebug sehen kann, ist

TypeError: this.options.icon is undefined
var anchor = L.point(this.options.icon.options.popupAnchor || [0, 0]);

etwas läuft schief, aber ich weiß nicht, wie ich es beheben soll.

Nur ändern

 var smallIcon = L.Icon({
   options: {
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'icone/chapel-2.png'
   }
 });

zu

 var smallIcon = new L.Icon({
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'icone/chapel-2.png'
 });

Siehe die offizielle Dokumentation zum Symbol und dieses Tutorial .

Sie verwenden es nicht newfür L.Icon (Es sollte nicht erforderlich sein, aber ohne es sind wir auf ein Problem gestoßen ...)

Sehen Sie sich eine Demo an, in der Ihr Beispiel wiederverwendet wird.

Ihre Syntax sollte beim Erweitern der L.IconKlasse funktionieren .

Verzeihen Sie mir, wenn ich falsch liege, da ich ein bisschen neu darin bin, aber ich habe bemerkt, dass Sie es als L.Icon mit einem Großbuchstaben I geschrieben haben . Vielleicht ist die Version neuer oder so, aber es funktioniert nicht, wenn ich es so buchstabiere. L.icon mit einem kleinen ich funktioniert gut für mich.

Sie haben auch den kleinen Fallnamen in der return-Anweisung verwendet.