Leaflet Awesome-Markers(添加数字)

Question

我现在用的是Leaflet.Awesome标志物与插件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的作者得到了另一棵树,在那里他准确地添加了你正在寻找的数字/字母的真棒标记,一定要抓住未经证实的JS.

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

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. 代码更改差异如下所示.

Answer 2

您可以按照本文关于在Leaflet中创建编号标记,而不是使用Awesome-Markers插件:

http://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 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);