Skip to main content
 首页 » 编程设计

javascript之传单 Awesome-Markers(添加数字)

2024年02月20日7youxin

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

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

这是一个 JS Fiddle 实现,用于展示插件的行为方式。

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

该插件允许使用很棒的字体图标和字形图标(当然,都不要提供任何 0 - 9 数字作为图标。!)

文档提到了使用 extraClasses 的能力,我想知道是否有人能给我指出正确的方向,如何利用它来显示数字而不是图标,或者是否有只是实现此目的的另一种方法。

预先感谢您的帮助。

更新:

感谢您的评论@Can

awesome-markers 的作者得到了另一棵树,他在其中准确添加了您要查找的内容 awesome-markers with numbers/letters一定要捕获未缩小的 JS。

请您参考如下方法:

我尝试过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. 代码更改差异如下所示。