传单真棒标记（添加数字）

Question

我正在将Leaflet.Awesome-Markers插件与LeafletJS一起使用。

我已经正确实现了，但是现在我希望能够使用0到9之间的数字来表示标记。

这是一个JS Fiddle实现，用于显示插件的行为。

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

该插件允许使用真棒字体图标和字形图标（当然，都不提供任何0-9数字作为图标。argh！]

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

文档中提到了使用extraClasses的能力，我想知道是否有人可以为我指明正确的方向，以便如何利用它来显示数字而不是图标，或者是否仅存在另一种方法来实现此目的。

感谢您的帮助。

UPDATE：

感谢评论@ Can。

[awesome-markers的作者又有一棵树，他在其中准确地添加了您要查找的内容awesome-markers with numbers/letters，请务必获取未缩小的JS。

Answer 1

代替使用Awesome-Markers插件，您可以按照本文的介绍在Leaflet中创建编号的标记：

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

相关的要点在这里：

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

Answer 2

我已经尝试了Numbered Markers插件，但是它的图标并不像其他Awesome Markers那样漂亮，并且页面布局样式不一致，因此我在Awesome-Markers插件中做了一些小的改动以使其支持数字。这很简单。

1. 这是数字标记插件效果，如果您喜欢它，请跳过我的回答。 “ >>

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 : ""
},

3. 更改leaflet.awesome-markers.js第80行，

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

4. [创建图标时，像以前一样打电话

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

5. 注释第45和47行。

6. 结果如下图所示。

7. 代码更改差异如下所示。 “ >>

另一种策略是使用Leaflet.ExtraMarkers plugin

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

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

如果您不想使用超棒的字体，这里提供了一个相当简单的解决方案：Simple Numbered Markers它不需要任何额外的库。它已经在传单中了。只需创建一个带有图标图像的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                               
});

Answer 3

另一种策略是使用Leaflet.ExtraMarkers plugin

Answer 4

如果您不想使用超棒的字体，这里提供了一个相当简单的解决方案：Simple Numbered Markers它不需要任何额外的库。它已经在传单中了。只需创建一个带有图标图像的CSS类，如下所示：