叶片奇妙标记（添加数字）

Question

我正在使用Leaflet.Awesome-Markers插件和LeafletJS。

我已经成功实现了它，但现在我想能够使用0-9的数字来表示标记。

以下是一个JS Fiddle实现示例，展示插件的行为。

http://jsfiddle.net/fulvio/VPzu4/200/

该插件允许使用字体awesome图标和glyph图标（当然都不提供任何0-9数字作为图标。啊~！）

• http://getbootstrap.com/components/#glyphicons
• http://fortawesome.github.io/Font-Awesome/cheatsheet/

文档提到了使用extraClasses的能力，我想知道是否有人可以指导我如何利用这个功能显示数字而不是图标，或者是否有其他方法可以实现这一点。

感谢您提前的帮助。

更新：

感谢@Can的评论。

awesome-markers的作者另外添加了一个树，其中包含您要寻找的内容有数字/字母的awesome-markers插件，一定要获取未缩小的JS。

- fulvio

---

awesome-markers的作者另外创建了一个树，其中添加了你正在寻找的内容带数字/字母的awesome-markers，请确保获取未压缩的JS文件。 - Can Rau

我的错，评论之前没有尝试过。不知道为什么，但是无法让它工作。所以我正在使用rockXrock的解决方案，它非常好用，谢谢。 - Can Rau

Answer 1

我尝试使用了Numbered Markers插件，但是它的图标不如其他Awesome Markers漂亮，并且会让页面布局样式不一致，因此我对Awesome-Markers插件进行了小改动以支持数字。这非常简单。

1. 这是Numbered Markers插件的效果，如果您喜欢它，请跳过我的答案。

2. 更改leaflet.awesome-markers.js第2行，添加html:""

L.AwesomeMarkers.Icon = L.Icon.extend({
options: {
    iconSize: [35, 45],
    iconAnchor:   [17, 42],
    popupAnchor: [1, -32],
    shadowAnchor: [10, 12],
    shadowSize: [36, 16],
    className: 'awesome-marker',
    prefix: 'glyphicon',
    spinClass: 'fa-spin',
    extraClasses: '',
    icon: 'home',
    markerColor: 'blue',
    iconColor: 'white',
    html : ""
},

修改leaflet.awesome-markers.js文件的第80行，

return "<i " + iconColorStyle + "class='" + options.extraClasses + " " 
+ options.prefix + " " + iconClass + " " + iconSpinClass + " " 
+ iconColorClass + "'>" + options.html + "</i>";

创建图标时，像以前一样调用

var jobMarkerIcon = L.AwesomeMarkers.icon({
icon: '',
markerColor: 'darkblue',
prefix: 'fa',
html: (i+1)
});

注释掉第45和47行。

结果如下屏幕截图所示。

代码更改差异如下所示。

- rockXrock

---

请告诉我从哪里下载带有编号标记插件的软件。我需要完整的操作指南。谢谢。 - Mou

并绘制点（如果像我一样，您首先不知道令人敬畏的标记）：L.marker([50,70], {icon: jobMarkerIcon}).addTo(map); - cmbarbu

注意：最近版本的awesome-markers允许使用文本选项来完成此操作。不再需要进行这个演示了。 - Linpter

Answer 2

如果不想使用Awesome-Markers插件，您可以参考这篇关于在Leaflet中创建编号标记的文章：

http://blog.charliecroom.com/index.php/web/numbered-markers-in-leaflet

相关的Gist在这里：

https://gist.github.com/comp615/2288108

以下是如何实现的简单示例：

// The text could also be letters instead of numbers if that's more appropriate
var marker = new L.Marker(new L.LatLng(0, 0), {
    icon:   new L.NumberedDivIcon({number: '1'})
});

- Ben Smith

---

在使用此解决方案时要小心。它受到“知识共享署名-非商业性使用-相同方式共享3.0美国许可证”的保护，因此不能在商业环境中使用。 - Andi-lo

Answer 3

另一种策略是使用Leaflet.ExtraMarkers插件。

使用以下选项对数字标记进行编码：

var numMarker = L.ExtraMarkers.icon({
icon: 'fa-number',
number: 12,
markerColor: 'blue'
});
L.marker([41.77, -72.69], {icon: numMarker}).addTo(map);

- jackdougherty

Answer 4

如果您不想使用font-awesome，这里提供了一个相当简单的解决方案： 简单的数字标记 它不需要任何额外的库。它已经在leaflet中了。只需创建一个带有图标图片的CSS类，如下所示：

.number-icon
{
    background-image: url("images/number-marker-icon.png");
    background-size: 40px 40px;
    background-repeat: no-repeat;
    margin: 0 auto;
    text-align:center;
    color:white;
    font-weight: bold;   
}

然后创建像这样的图标：

var numberIcon = L.divIcon({
      className: "number-icon",
      shadowSize: [20, 30], // size of the shadow
      iconAnchor: [20, 40], 
      shadowAnchor: [4, 30],  // the same for the shadow
      popupAnchor: [0, -30],
      html: variable_containing_the_number        
});

var marker = new L.marker([lat, long],
{                               
    icon: numberIcon                               
});

- Saadat

---

由于上面的链接已经失效，这里是存档版本。 - Gorgsenegger