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

：

表示使用简单div元素而不是图像的标记的轻量级图标

把你的图像和文本放在它的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>'
    })
});

新的L.标记（[57.666667，-2.64]{
图标：新的L.DivIcon({
类名：“我的div图标”，
html:'+
“英国皇家空军班夫机场”
})
});

另一个选项是使用传单标签插件：

label是一个插件，用于将标签添加到传单驱动地图上的标记和形状

• 存储库：
• 例如：

---

从传单版本1.0.0开始，您可以添加标签，而无需使用插件（插件已被集成到核心功能中）

例如：

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

---

这将在地图上生成一个标记，其标签为“测试标签”，始终显示在标记图标的右侧。

正是我所寻找的。谢谢非常适合我。我想为每个标记自定义文本，但我不能使用图像：）这很好。我想你错发了，它应该是小写的

divIcon

“注意：从传单1.0开始，L。标签作为L添加到传单核心。工具提示和此插件被弃用。”回答得很好！很高兴传单将此纳入核心包装。API参考在这里-