Leaflet Awesome-Markers (Hinzufügen von Zahlen)

Question

Ich verwende das Leaflet.Awesome-Markers Plugin mit LeafletJS.

Ich habe es richtig implementiert, aber jetzt möchte ich in der Lage sein, Zahlen von 0 - 9 zu verwenden, um Markierungen darzustellen.

Hier ist eine JS Fiddle-Implementierung, um zu zeigen, wie sich das Plugin verhält.

http://jsfiddle.net/fulvio/VPzu4/200/

Das Plugin ermöglicht die Verwendung von Schrift-awesome Symbole und Glyphen-Icons (beide natürlich, bieten keine 0 -. 9 Zahlen als Symbole argh!)

• http://getbootstrap.com/components/#glyphicons
• http://fortawesome.github.io/Font-Awesome/cheatsheet/

Die Dokumentation Männer die Möglichkeit, extraClasses zu verwenden, und ich frage mich, ob mir jemand in die richtige Richtung zeigen könnte, wie man daraus Nutzen ziehen kann, um Zahlen statt Icons anzuzeigen oder ob es einfach einen anderen Weg gibt, dies zu erreichen.

Vielen Dank im Voraus für Ihre Hilfe.

UPDATE:

Danke für den Kommentar @Can.

Der Autor von awesome-markers hat einen anderen Baum bekommen, wo er genau das hinzugefügt hat, wonach Sie gesucht haben: awesome-markers with numbers/letters Achten Sie darauf, das unminifizierte JS zu holen.

Answer 1

Statt die Super-Marker-Plugin zu verwenden, können Sie diesen Artikel folgen auf nummerierten Markierungen in Prospekt erstellen:

http://charliecroom.com/index.php/web/numbered-markers-in-leaflet

Der zugehörige Gist ist hier:

https://gist.github.com/comp615/2288108

Ein Ein einfaches Beispiel, wie dies funktionieren würde, ist wie folgt:

// The text could also be letters instead of numbers if that's more appropriate 
var marker = new L.Marker(new L.LatLng(0, 0), { 
    icon: new L.NumberedDivIcon({number: '1'}) 
}); 

Answer 2

Ich habe versucht, Numbered Markers Plugin, aber es ist nicht so schön wie andere Awesome Markers, und machen Seitenlayout Stil inkonsistent, so dass ich kleine Änderungen in Awesome-Markers-Plugin gemacht, um es Zahlen zu unterstützen. Es ist sehr einfach.

1. Dies ist Numbered Markers Plugin-Effekt, wenn Sie es mögen, überspringen Sie bitte meine Antwort.

2. Änderung leaflet.awesome-markers.js Linie 2, fügen Sie HTML: ""

   L.AwesomeMarkers.Icon = L.Icon.extend({ 
   options: { 
       iconSize: [35, 45], 
       iconAnchor: [17, 42], 
       popupAnchor: [1, -32], 
       shadowAnchor: [10, 12], 
       shadowSize: [36, 16], 
       className: 'awesome-marker', 
       prefix: 'glyphicon', 
       spinClass: 'fa-spin', 
       extraClasses: '', 
       icon: 'home', 
       markerColor: 'blue', 
       iconColor: 'white', 
       html : "" 
   }, 
   

3. Änderung leaflet.awesome-Marker.js Linie 80,

   return "<i " + iconColorStyle + "class='" + options.extraClasses + " " 
   + options.prefix + " " + iconClass + " " + iconSpinClass + " " 
   + iconColorClass + "'>" + options.html + "</i>"; 
   

4. wenn Symbol erstellen, ruft wie vor

   var jobMarkerIcon = L.AwesomeMarkers.icon({ 
   icon: '', 
   markerColor: 'darkblue', 
   prefix: 'fa', 
   html: (i+1) 
   }); 
   

5. Kommentar aus der Leitung 45 und 47.

6. das Ergebnis ist wie unten Screenshot.

7. code ändert diff zeigt unten.

Answer 3

Eine andere Strategie ist die Leaflet.ExtraMarkers plugin

-Code den numerischen Marker mit diesen Optionen zu verwenden:

var numMarker = L.ExtraMarkers.icon({ 
icon: 'fa-number', 
number: 12, 
markerColor: 'blue' 
}); 
L.marker([41.77, -72.69], {icon: numMarker}).addTo(map);