javascript 瓣叶Awesome-标记物(添加数字)

px9o7tmv  于 2023-01-29  发布在  Java
关注(0)|答案(4)|浏览(170)

我正在使用Leaflet.Awesome-Markers插件和LeafletJS
我已经正确地实现了它,但是现在我希望能够使用从0 - 9的数字来表示标记。
下面是一个JSFiddle实现,展示了插件的行为。
http://jsfiddle.net/fulvio/VPzu4/200/
该插件允许使用字体真棒图标和字形图标(当然,两者都不提供任何0 - 9数字作为图标。* 啊 *!)

文档中提到了使用extraClasses的能力,我想知道是否有人能给我指出正确的方向,告诉我如何利用这个功能来显示数字而不是图标,或者是否有另一种简单的方法来实现这一点。
先谢谢你的帮助。

    • 更新日期:**

感谢评论**@Can**。
awesome标记的作者得到了另一棵树,他在那里添加了你正在寻找的awesome-markers with numbers/letters,一定要抓住未缩小的JS。

wkyowqbh

wkyowqbh1#

我试过数字标记插件,但它的图标不漂亮,因为其他真棒标记,并使页面布局风格不一致,所以我在真棒标记插件做了小的变化,使其支持数字。这是非常简单的。
1.这是数字标记插件效果,如果你喜欢它请跳过我的答案. x1c 0d1x
1.更改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 : ""
},

1.改变leaflet.awesome-markers.js行80,

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

1.当创建图标时,像以前一样调用

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

1.注解掉第45和47行。
1.结果如下图所示。

1.代码更改差异如下所示。

uyhoqukh

uyhoqukh2#

除了使用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'})
});
fjnneemd

fjnneemd3#

另一种策略是使用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);
fcy6dtqo

fcy6dtqo4#

如果你不想使用font-awesome,这里给出了一个相当简单的解决方案:Simple Numbered Markers它不需要任何额外的库。它已经在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                               
});

相关问题