Dépliant: comment ajouter une étiquette 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 marqueur d'icône personnalisé comme ceci:

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 ajouter le texte "Aéroport de Banff" comme étiquette à cette icône? Est-ce la façon la plus simple et la plus efficace d'utiliser un éditeur d'image? si c'est le cas, je ferai cette méthode, mais je me demande s'il y a un meilleur moyen. Merci!

14
demandé sur redshift 2016-01-13 22:23:30

2 réponses

vous pourriez utiliser un L.DivIcon:

représente une icône légère pour les marqueurs qui utilise un élément div simple au lieu d'une image.

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

mettez votre image et votre texte dans son HTML, saupoudrez de CSS pour le faire apparaître comme vous voulez et vous êtes bon à 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 la notice.Étiquette plugin:

Dépliant.l'étiquette est plugin pour ajouter des étiquettes à des marqueurs et des formes sur des cartes alimentées par dépliant.

17
répondu iH8 2016-01-13 20:04:56

à partir de la version 1.0.0 du dépliant, vous pouvez ajouter une étiquette sans utiliser de plugin (le plugin a été intégré dans la fonctionnalité core).

Exemple:

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

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

14
répondu Mark S 2016-10-02 07:24:42