web-dev-qa-db-fra.com

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

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

J'ai créé mon marqueur d'icône personnalisé comme suit:

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 "Banff Airfield" comme étiquette à cette icône? Est-ce le moyen le plus simple et le plus efficace d'utiliser un éditeur d'images? si c'est le cas, je ferai cette méthode, mais en me demandant s'il y avait une meilleure façon. Merci!

leafletmapbox
23
redshift

Vous pouvez utiliser un L.DivIcon:

Représente une icône légère pour les marqueurs qui utilise un simple élément div 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 le souhaitez et vous êtes prêt à partir

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 consiste à utiliser le plugin Leaflet.Label:

Leaflet.label est un plugin pour ajouter des étiquettes aux marqueurs et aux formes sur les cartes alimentées par des dépliants.

36
iH8

Depuis la version 1.0.0 de la brochure, vous pouvez ajouter une étiquette sans utiliser de plugin (le plugin a été intégré dans la fonctionnalité principale).

Exemple:

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

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

20
Mark