Come aggiungere etichette di solo testo sulla mappa depliant senza icona

22

Sto cercando un modo per mostrare il testo sulla mappa dei volantini usando gli indicatori o qualsiasi altra cosa senza mostrare alcuna icona. Voglio mostrare solo il testo ed essere in grado di modellarlo e ruotarlo ... Qualche suggerimento?

leaflet

— Etienne Desgagné
fonte

1

@NikhilVJ - Quella D&R non discute su come avere una descrizione comandi senza un marcatore corrispondente. Le risposte qui discutono su come avere solo il testo, senza marcatore visibile.

— ToolmakerSteve

ah scusa mio cattivo

— Nikhil VJ

19

Ho risolto il mio problema utilizzando la funzione Leaflet L.DivIcon che rappresenta un'icona leggera per i marcatori che utilizza un semplice elemento div anziché un'immagine ... Questi marcatori hanno un html e un className che mi consentono di creare etichette con css driven stili ...

— Etienne Desgagné
fonte

11

Ti dispiacerebbe fornire un po 'di codice per questo?

— mastov,

Questa risposta non è idea se si desidera un'etichetta E un marcatore

— Roy

@Roy - questa è una situazione diversa; Vedi L.Tooltip . Se si desidera che l'etichetta (la descrizione comandi) venga sempre visualizzata, impostare l'opzione permanente su true.

— ToolmakerSteve

16

Aggiornamento per Leaflet 1.0: A partire da Leaflet 1.0, il plug-in Leaflet.label è obsoleto, poiché è stato incluso con il core Leaflet come L.Tooltip. Non è necessario includere lo script di origine e la sintassi è leggermente cambiata. Esempio di utilizzo:

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);

Lo stile CSS può essere applicato alla classe come prima.

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

Sembra anche che l'opacità del marker possa essere impostata completamente su 0.

Prima di Leaflet 1.0: utilizzare il plug-in Leaflet.label (già menzionato da geomajor56).

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

Con il plug-in Leaflet Label, le etichette sono direttamente legate ai marker, ma è possibile impostare l'opacità del marker quasi a zero in modo che sia visibile solo l'etichetta. (Se si imposta l'opacità del marcatore su 0, anche l'etichetta associata scompare.)

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);

È quindi possibile utilizzare i CSS per modellare le etichette come meglio credi:

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

— James Lawruk
fonte

— Marcin Kosiński,

@ MarcinKosiński - Sì, dovrai scaricare leaflet.label.js dal link GitHub nel post e metterlo in una sottocartella del tuo sito web denominata script. In alternativa, puoi sostituire l'URL nel codice con il file ospitato su leaflet.github.io/Leaflet.label/leaflet.label.js (potresti anche volere il file CSS; stesso nome e posizione, stessa estensione).

— Keith

ho provato a farlo ,,, hai idea di come rimuovere lo sfondo e il bordo? snag.gy/JdnpyV.jpg

— WantIt il

Quando si utilizza L.Tooltipinside onEachFeature, viene visualizzato l'errore: "Uncaught TypeError: Impossibile eseguire 'appendChild' su 'Node': il parametro 1 non è di tipo 'Nodo'."

— Nikhil VJ,

Risolto, stavo usando una delle proprietà della funzione come testo, dovevo aggiungere .toString()a alla fine. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...

— Nikhil VJ,

4

Puoi iniziare qui con questo plug-in Leaflet . Probabilmente crea o modifica un marker a tuo piacimento. Il testo proviene dagli attributi della funzione?

— geomajor56
fonte

Questo risponde a una domanda diversa da quella che è stata posta. Ecco come aggiungere un'etichetta a un marcatore esistente ; si tratta non è una spiegazione su come avere solo un'etichetta - nessun simbolo marcatore.

— ToolmakerSteve

0

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

Questo funziona per me

— Sathish Kumar Arunachalam
fonte

Questo risponde a una domanda diversa da quella che è stata posta. Ecco come aggiungere un'etichetta a un marcatore esistente ; si tratta non è una spiegazione su come avere solo un'etichetta - nessun simbolo marcatore.

— ToolmakerSteve