Javascript 传单（添加编号）

我使用的插件与

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

下面是一个JS Fiddle实现来展示插件的行为

该插件允许使用字体可怕的图标和字形图标（当然，两者都不提供任何0-9数字作为图标。啊！）

文档中提到了使用

Extraclass

的能力，我想知道是否有人能给我指出正确的方向，告诉我如何利用它来显示数字而不是图标，或者是否有其他方法来实现这一点

提前感谢你的帮助

更新：

感谢您的评论@Can

---

awesome markers的作者得到了另一棵树，他在树上添加了您想要的内容。请务必抓住未统一的JS。

您可以按照本文在传单中创建编号标记，而不是使用awesome markers插件：

相关要点如下：

这将如何工作的一个简单示例如下：

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

---

我已经尝试过数字标记插件，但它的图标并不漂亮，其他可怕的标记，并使页面布局风格不一致，所以我在可怕的标记插件做了小改动，使其支持数字。这很简单

这是数字标记插件效果，如果你喜欢，请跳过我的答案

更改传单.awesome-markers.js第2行，添加html:“

更改传单.awesome-markers.js第80行

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

注释掉第45行和第47行

结果如下图所示

代码更改差异如下所示

---

另一个策略是使用

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

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

---

如果您不想使用令人敬畏的字体，这里提供了一个相当简单的解决方案： 它不需要任何额外的图书馆。传单上已经有了。只需创建一个带有图标图像的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                               
});

然后创建如下图标：

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

---

《了不起的标记》的作者得到了另一棵树，他在树上添加了你想要的东西。一定要抓住未被发现的JSMy错误，在评论之前没有尝试过。不知道为什么，但无法让它工作。所以我使用的是rockXrock的解决方案，它的工作方式很有魅力，谢谢你，在哪里下载带有数字标记的插件。我需要全面的指导来配合工作。感谢和plot point（如果像我一样，你一开始不知道可怕的标记）：L.marker（[50,70]，{icon:jobMarkerIcon}）.addTo（map）；注意：awesome markers的最新版本允许使用文本选项执行此操作。不再需要执行此演练。使用此解决方案时请小心。它是根据“知识共享署名非商业性共享3.0美国许可证”授权的，因此在商业环境中不可用。