Leaflet：如何将文本标签添加到自定义标记图标？

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/

Answer 2

自 leaflet 版本 1.0.0 起，您可以在不使用插件的情况下添加标签（插件已纳入核心功能）。

示例：

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

这会在地图上生成一个带有标签 "Test Label" 的标记，该标记始终显示在标记图标的右侧。

Answer 3

这是开箱即用的解决方案，可能不适合所有人，但对我有用只需添加图标标记，然后添加文本标记，就像这样：

    var MarkerIcon = L.icon(feature.geometry.properties.icon);
    var MarkerText = L.divIcon(
    {className: TextPositionClass,
     html:'<div>'+ displayText+'</div>',
     iconSize: null
    });
        
        
  let  marker = L.marker(latlng,  {icon: MarkerIcon}).addTo(this.map); // add marker 
  let label = L.marker(latlng, {icon: MarkerText}).addTo(this.map); // add text on marker

Leaflet：如何将文本标签添加到自定义标记图标？

Leaflet: How to add a text label to a custom marker icon?

leaflet

mapbox