La guía paso a paso o código que encontrarás en este post es la solución más sencilla y válida que hallamos a tu duda o dilema.
Solución:
Superposición de etiquetas en el folleto usando la clase Marker y la clase DivIcon con la propiedad ‘html’
Personalmente, uso este método para implementar etiquetas de texto en el mapa. De esta manera, puedo usar todos los métodos y eventos de Marker Class existentes sin ningún esfuerzo adicional. Supongo que es un poco como usar una etiqueta de texto en lugar de un icono.
var textLatLng = [35.1436, -111.5632];
var myTextLabel = L.marker(textLatLng,
icon: L.divIcon(
className: 'text-labels', // Set class for CSS styling
html: 'A Text Label'
),
zIndexOffset: 1000 // Make appear above other map features
);
Mi CSS se parece a:
.text-labels
font-size: 2em;
font-weight: 700;
color: white;
/* Use color, background, set margins for offset, etc */
Además, aún no he explorado esto, pero tal vez pueda agregar un png al CSS y luego compensar el texto, de modo que pueda envolver un icono y una etiqueta en el mismo objeto Marker usando la clase Leaflet DivIcon. Esto sería fácil con una forma div (por ejemplo, un cuadro, un círculo), pero no estoy seguro de agregar un png al CSS para el objeto Marker, porque no soy un gurú de CSS de ninguna manera.
Estaba buscando la misma pregunta recientemente y la implementé ayer en función de una publicación en el grupo de Google. https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw
Gracias a Adrian por la muestra del código original.
Aquí está la solución:
Extienda la siguiente clase de la siguiente manera:
Además agregue este css:
Y luego muestre las etiquetas de texto como se muestra a continuación:
Resultado:
Sección de Reseñas y Valoraciones
Si conservas algún dilema o disposición de beneficiar nuestro sección puedes dejar una crítica y con deseo lo interpretaremos.