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

- redshift

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是一个为在Leaflet地图上的标记和形状添加标签的插件。

• 代码库: https://github.com/Leaflet/Leaflet.label
• 示例: http://leaflet.github.io/Leaflet.label/

- iH8

---

正是我所寻找的。谢谢！ - redshift

非常适合我。我想为每个标记设置自定义文本，但是使用图像无法实现 :) 这很完美。 - Sergio Tx

我认为你拼错了，应该是小写的 divIcon。 - phil294

注意：从Leaflet 1.0开始，L.Label作为L.Tooltip添加到了Leaflet核心中，因此该插件已被弃用。 - Lee Goddard

Answer 2

从leaflet版本1.0.0开始，您可以在不使用插件的情况下添加标签（插件已被整合到核心功能中）。

示例：

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

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

- Mark

---

太棒了！很高兴Leaflet将其纳入核心包中。API参考在这里 - http://leafletjs.com/reference-1.0.3.html#layer-bindtooltip - MattSidor

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

Answer 3

为了进一步探讨Mark的回答，如果你想知道在标记上添加文本（数字）的简单方法，可以像这样：

您只需要按照以下步骤进行操作： 1. 实例化一个图标（map.js）

var stepIcon = L.icon({
    iconUrl: 'graphic/yellow-circle.png', // the background image you want
    iconSize: [40, 40], // size of the icon
});

2.1 设置图标 (map.js)

var marker = new L.marker([39.5, 77.3], { icon:stepIcon});
marker.bindTooltip("12" //specific number, {
                            permanent: true,
                            direction: 'center',
                            className: "my-labels"
                         });
marker.addTo(map);

2.2 设置图标（map.css）

.leaflet-tooltip.my-labels {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  font-weight: bold;
  font-size: 30px;
  }

确保你已经将你的 .css 文件导入到你的 .html 页面中。

- thomaslprr

Answer 4

这是一个非常实用的解决方案，可能并不适合所有人，但对我来说很有效。你只需要添加图标的标记，然后再添加文本的标记，就像这样：

    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

- taha mosaad