我正在使用Leaflet.Awesome-Markers插件 LeafletJS .
我已经正确实现了它,但是现在我希望能够使用 0 - 9 之间的数字来表示标记。
这是一个 JS Fiddle 实现,用于展示插件的行为方式。
http://jsfiddle.net/fulvio/VPzu4/200/
该插件允许使用很棒的字体图标和字形图标(当然,都不要提供任何 0 - 9 数字作为图标。啊!)
- http://getbootstrap.com/components/#glyphicons
- http://fortawesome.github.io/Font-Awesome/cheatsheet/
文档提到了使用 extraClasses
的能力,我想知道是否有人能给我指出正确的方向,如何利用它来显示数字而不是图标,或者是否有只是实现此目的的另一种方法。
预先感谢您的帮助。
更新:
感谢您的评论@Can。
awesome-markers 的作者得到了另一棵树,他在其中准确添加了您要查找的内容 awesome-markers with numbers/letters一定要捕获未缩小的 JS。
请您参考如下方法:
我尝试过Numbered Markers插件,但它的图标不像其他Awesome Markers那样漂亮,并且使页面布局风格不一致,所以我在Awesome-Markers插件中做了一些小改动,使其支持数字。非常简单。
这是编号标记插件效果,如果您喜欢,请跳过我的回答。
更改 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 行。
结果如下图所示。
代码更改差异如下所示。