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

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

我将如何添加文本“班夫机场”作为一个标签，这个图标？通过使用图像编辑器是最简单和最有效的方法吗？如果是这样，我会采用这种方法，但是想知道是否有更好的方法。谢谢！

Answer 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/

Answer 2

由于单张版本1.0.0，您可以添加一个标签，而无需使用插件（插件已经被整合进核心功能）。

实施例：

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

这产生了“测试标签”，它总是显示到标记的图标的右侧的标签的地图上的标记。