传单:如何将文本标签添加到自定义标记图标？

Question

是否可以向自定义图标标记添加文本？我想避免在图像编辑器中编辑图标只是为了添加文本。

我已经像这样创建了我的自定义图标标记:

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

我如何将文本“Banff Airfield”作为标签添加到此图标？使用图像编辑器是最简单、最有效的方法吗？如果是这样，我会这样做，但想知道是否有更好的方法。谢谢!

Answer 1

您可以使用 L.DivIcon :

Represents a lightweight icon for markers that uses a simple div element instead of an image.

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 is plugin for adding labels to markers & shapes on leaflet powered maps.

存储库:https://github.com/Leaflet/Leaflet.label

示例:http://leaflet.github.io/Leaflet.label/