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:

表示使用简单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'
    }
);

这会在地图上生成一个标记为"测试标签"的标记,该标记始终显示在标记图标的右侧.

Answer 3

为了进一步探索马克的答案，如果您想知道一种在标记上添加文本（数字）的简单方法，如下所示：

您只需按以下步骤操作：

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页面中。