Листовка Awesome-Markers (добавление номеров)

Я использую плагин Leaflet.Awesome-Markers с LeafletJS.

Я реализовал его правильно, однако теперь я хотел бы иметь возможность использовать числа от 0 до 9 для представления маркеров.

Здесь реализована реализация JS Fiddle, чтобы показать, как работает плагин.

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

Плагин позволяет использовать значки шрифтов и значки символов (оба, конечно, не содержат никаких 0 - 9 цифр в качестве значков. argh!)

В документации упоминается возможность использования extraClasses, и мне было интересно, может ли кто-нибудь указать мне в правильном направлении относительно того, как использовать это, чтобы отображать числа, а не значки, или есть ли еще один способ достичь это.

Заранее благодарим за помощь.

UPDATE:

Спасибо за комментарий @Can.

Автор awesome-markers получил другое дерево, где он добавил точно, что вы ищете удивительные маркеры с цифрами/буквами, обязательно возьмите Unminified JS.

Ответы

Ответ 1

Вместо использования плагина Awesome-Markers вы можете следовать этой статье о создании нумерованных маркеров в Листовке:

http://charliecroom.com/index.php/web/numbered-markers-in-leaflet

Связанный Gist находится здесь:

https://gist.github.com/comp615/2288108

Простым примером того, как это будет работать, является следующее:

// The text could also be letters instead of numbers if that more appropriate
var marker = new L.Marker(new L.LatLng(0, 0), {
    icon:   new L.NumberedDivIcon({number: '1'})
});

Ответ 2

Я пробовал плагин с числовыми маркерами, но этот значок не очень похож на другие Awesome Markers и делает стиль макета страницы непоследовательным, поэтому я внес небольшие изменения в плагин Awesome-Markers, чтобы он поддерживал числа. Это очень просто.

  • Это эффект плагинов с нумерованными маркерами, если вам это нравится, пропустите мой ответ. enter image description here

  • измените буклет.отличаем-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 : ""
},

  • измените буклет-буклет .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.

  • результат выглядит как снимок экрана. enter image description here

  • Ниже приведен код изменений ниже. enter image description here

Ответ 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);