Cómo añadir etiquetas de sólo texto en el mapa de Leaflet sin icono

Question

Estoy buscando una manera de mostrar texto en el mapa de Leaflet usando marcadores o cualquier otra cosa sin mostrar ningún icono. Quiero mostrar sólo texto y poder darle estilo y rotarlo... ¿Alguna sugerencia?

Answer 1

Actualización para el folleto 1.0: A partir de Leaflet 1.0, el Plugin Leaflet.label está depracticado, ya que se ha incluido con el núcleo de Leaflet como L.Tooltip . No es necesario incluir el script fuente, y la sintaxis ha cambiado ligeramente. Ejemplo de uso:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

El estilo CSS se puede aplicar a la clase de la misma manera que antes.

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

También parece que la opacidad del marcador puede fijarse completamente a 0.

---

Antes del folleto 1.0: Utiliza el Plugin Leaflet.label (ya mencionado por geomajor56).

<script src="scripts/leaflet.label.js"></script>

Con el plugin de etiquetas de Leaflet, las etiquetas están directamente vinculadas a los marcadores, pero puede ajustar la opacidad del marcador a casi cero para que sólo sea visible la etiqueta. (Si establece la opacidad del marcador en 0, la etiqueta asociada también desaparece).

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

A continuación, puede utilizar CSS para dar el estilo que desee a sus etiquetas:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

Answer 2

Resolví mi problema utilizando la función L.DivIcon de Leaflet que representa un icono ligero para los marcadores que utiliza un simple elemento div en lugar de una imagen... Estos marcadores tienen un html y un className opciones que me permiten crear etiquetas con estilos css drived ...

Answer 3

Puede empezar por aquí Plugin del folleto . Probablemente cree o edite un marcador a su gusto. ¿El texto procede de los atributos de las características?

Answer 4

marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

Esto me funciona