javascript - font - Leaflet Awesome-Markers(Agregar números)

leaflet marker icon font awesome

Question

Estoy usando el plugin Leaflet.Awesome-Markers con LeafletJS .

Lo he implementado correctamente, sin embargo ahora me gustaría poder usar números del 0 al 9 para representar marcadores.

Aquí hay una implementación de JS Fiddle para mostrar cómo se comporta el complemento.

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

El complemento permite el uso de íconos increíbles de fuentes e íconos de glifos (ambos por supuesto, no ofrecen ningún número 0 - 9 como íconos. Argh !)

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

La documentación menciona la capacidad de utilizar extraClasses y me preguntaba si alguien podría indicarme la dirección correcta para aprovecharla para mostrar números en lugar de iconos o si simplemente hay otra forma de lograrlo.

Gracias de antemano por tu ayuda.

ACTUALIZAR:

Gracias por el comentario @Can .

El autor de marcadores increíbles obtuvo otro árbol en el que agregó exactamente lo que estás buscando : marcadores asombrosos con números / letras. Asegúrate de obtener el JS no minificado.

Answer 1

En lugar de utilizar el complemento Awesome-Markers, puedes seguir este artículo sobre cómo crear marcadores numerados en el folleto:

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

El Gist asociado está aquí:

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

Un ejemplo simple de cómo esto funcionaría es el siguiente:

// 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

He probado el plugin Numbered Markers, pero este ícono no es tan bonito como otros Awesome Markers, y hace que el estilo de diseño de la página sea inconsistente, así que hice pequeños cambios en el complemento Awesome-Markers para que sea compatible con los números. Es muy simple.

1. este es el efecto del plugin Marcadores numerados, si lo desea, omita mi respuesta.

2. cambie la línea 2 de leaflet.awesome-markers.js, agregue 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. cambiar la línea 80 de leaflet.awesome-markers.js,

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

4. al crear ícono, llame como antes

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

5. comentar la línea 45 y 47.

6. el resultado es como la captura de pantalla siguiente.

7. el código de cambios dif se muestra a continuación.

Answer 3

Otra estrategia es utilizar el complemento Leaflet.ExtraMarkers

Codifique el marcador numérico con estas opciones:

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