Листовка: как добавить текстовую метку к значку пользовательского маркера?

Можно ли добавить текст к пользовательскому значку маркера? Я хочу избежать необходимости редактировать значок в редакторе изображений только для добавления текста.

Я создал свой собственный знаковый маркер так:

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

Как добавить текст "Банфский аэродром" в качестве ярлыка к этому значку? Самый простой и эффективный способ использования редактора изображений? если так, я сделаю этот метод, но задаюсь вопросом, был ли лучший способ. Спасибо!

Ответы

Ответ 1

Вы можете использовать L.DivIcon:

Представляет облегченный значок для маркеров, в котором вместо изображения используется простой элемент div.

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

Поместите изображение и текст в HTML, добавьте немного CSS, чтобы он выглядел так, как вы хотите, и все готово

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

Другой вариант - использовать плагин Leaflet.Label:

Leaflet.label - это плагин для добавления меток к маркерам и фигурам на картах с буклетами.

Ответ 2

Как и в листовке версии 1.0.0, вы можете добавить метку без использования плагина (плагин был перенесен в функциональность ядра).

Пример:

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

Это дает маркер на карте с меткой "Test Label", которая всегда отображается справа от значка маркера.