Leaflet: Comment ajouter une étiquette de texte à une icône de marqueur personnalisé?

Est-il possible d'ajouter du texte à une icône personnalisée marqueur? Je veux éviter d'avoir à modifier l'icône dans un éditeur d'image pour ajouter le texte.

J'ai créé mon icône personnalisée marqueur de la sorte:

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

Comment pourrais-je ajouter le texte "Banff Aérodrome" comme une étiquette à cette icône? Est la méthode la plus simple et la plus efficace grâce à l'utilisation d'un éditeur d'image? si oui, je vais le faire, mais vous vous demandez si il y a une meilleure façon. Merci!

source d'informationauteur redshift

  1. 15

    Vous pouvez utiliser un L.DivIcon:

    Représente un léger icône pour les marqueurs qui utilise un simple élément div au lieu d'une image.

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

    Placer votre image et de texte dans le HTML, saupoudrer d'un peu de CSS pour le faire apparaître comme vous le souhaitez et vous êtes bon pour aller

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

    Une autre option est d'utiliser le Dépliant.Étiquette plugin:

    Dépliant.l'étiquette est un plugin pour ajouter des étiquettes à des marqueurs & formes de tracts alimenté cartes.

  2. 14

    Comme de la notice de la version 1.0.0, vous pouvez ajouter une étiquette sans l'aide d'un plugin (plugin a été roulé dans la fonctionnalité de base).

    Exemple:

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

    Cela donne un marqueur sur la carte avec une étiquette de "l'Étiquette de Test" qui est toujours affichée à droite du marqueur de l'icône.