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

Posted 2023-02-16

【中文标题】传单：如何将文本标签添加到自定义标记图标？

【英文标题】：Leaflet: How to add a text label to a custom marker icon?

【发布时间】：2016-04-18 22:27:59

【问题描述】：

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

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

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”作为标签添加到此图标？使用图像编辑器是最简单、最有效的方法吗？如果是这样，我会这样做，但想知道是否有更好的方法。谢谢！

【参考方案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 是用于在传单驱动的地图上为标记和形状添加标签的插件。

存储库：https://github.com/Leaflet/Leaflet.label 示例：http://leaflet.github.io/Leaflet.label/

【讨论】：

正是我想要的。谢谢！

非常适合我。我想要每个标记的自定义文本，但我不能用图像来做到这一点:) 这很完美。

我想你拼错了，应该是小写的divIcon。

"注意：从 Leaflet 1.0 开始，L.Label 作为 L.Tooltip 添加到 Leaflet 核心，并且该插件已被弃用。"

【参考方案2】：

从传单版本 1.0.0 开始，您可以在不使用插件的情况下添加标签（该插件已纳入核心功能）。

例子：

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

这会在地图上生成一个带有“测试标签”标签的标记，该标签始终显示在标记图标的右侧。

【讨论】：

很好的答案！很高兴 Leaflet 将它纳入核心包。 API 参考在这里 - leafletjs.com/reference-1.0.3.html#layer-bindtooltip

让它看起来像谷歌地图标记：L.marker(latlng).bindTooltip("A",permanent: true, direction: 'top',offset:L.point(-14, -5)).addTo(map);

【参考方案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