Opuscolo: come aggiungere un'etichetta di testo all'icona di un indicatore personalizzato?

Question

È possibile aggiungere del testo a un indicatore di icona personalizzato? Voglio evitare di dover modificare l'icona in un editor di immagini solo per aggiungere il testo.

Ho creato il mio marcatore un'icona personalizzata in questo modo:

var airfieldIcon = L.icon({ 
     iconUrl: 'images/airfield.png', 
     iconSize: [48,48] 
}); 

var airfield = L.geoJson (airfield, { 
    pointToLayer: function(feature,latlng){ 
     return L.marker(latlng, { 
      icon: airfieldIcon 
     }) 
    } 
}).addTo(map); 

Come dovrei aggiungere il testo "Banff Airfield" come etichetta per questa icona? È il modo più semplice ed efficiente attraverso l'uso di un editor di immagini? se è così, farò quel metodo, ma mi chiedo se ci sia un modo migliore. Grazie!

Answer 1

si potrebbe usare un L.DivIcon:

Rappresenta l'icona di un leggero per marcatori che utilizza un semplice elemento div anziché un'immagine.

http://leafletjs.com/reference.html#divicon

Metti la tua immagine e testo nella sua HTML, cospargere un po 'di CSS per farlo apparire nel modo desiderato e siete pronti ad andare

new L.Marker([57.666667, -2.64], { 
    icon: new L.DivIcon({ 
     className: 'my-div-icon', 
     html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+ 
       '<span class="my-div-span">RAF Banff Airfield</span>' 
    }) 
}); 

Un'altra opzione è quella di utilizzare il plugin Leaflet.Label:

Leaflet.label è il plug-in per l'aggiunta di etichette ai marcatori & forme sul volantino mappe ed.

• Repository: https://github.com/Leaflet/Leaflet.label
• Esempio: http://leaflet.github.io/Leaflet.label/

Answer 2

Come del volantino la versione 1.0.0, è possibile aggiungere un'etichetta senza utilizzare un plugin (il plugin è stato rotolato nella funzionalità di base).

Esempio:

var marker = L.marker(latlng) 
    .bindTooltip("Test Label", 
    { 
     permanent: true, 
     direction: 'right' 
    } 
); 

Questo produce un marker sulla mappa con l'etichetta di "etichetta di prova", che viene sempre visualizzata a destra dell'icona del marcatore.