leaflet - 传单:如何向自定义标记图标添加文本标签？

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

我已经创建了自定义图标标记，如下所示:

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

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

最佳答案

您可以使用L.DivIcon:



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插件:

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

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

关于leaflet - 传单:如何向自定义标记图标添加文本标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34775308/