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!
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.
à 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.