Leaflet Awesome-Markers (Добавление чисел)

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

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

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

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

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

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

Заранее спасибо за помощь.

ОБНОВЛЕНИЕ:

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

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


javascript dictionary leaflet font-awesome markers
person fulvio    schedule 24.03.2014    source источник
comment
Автор awesome-markers получил еще одно дерево, в которое добавил именно то, что вы ищете классные маркеры с цифрами и буквами, обязательно возьмите неминифицированный JS   -  person Can Rau    schedule 27.06.2015
comment
Моя вина, не пробовал перед тем, как комментировать. Не знаю почему, но не смог заставить это работать. Итак, я использую решение rockXrock, и оно работает как шарм, спасибо за это   -  person Can Rau    schedule 28.06.2015

Ответы (4)


arrow_upward
17
arrow_downward

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

http://blog.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's more appropriate
var marker = new L.Marker(new L.LatLng(0, 0), {
    icon:   new L.NumberedDivIcon({number: '1'})
});
person Ben Smith    schedule 27.03.2014
comment
Будьте осторожны при использовании этого раствора. Он находится под лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. и поэтому не может использоваться в коммерческом контексте. - person Andi-lo; 24.10.2018

arrow_upward
36
arrow_downward

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

  1. это эффект плагина пронумерованных маркеров, если он вам нравится, пропустите мой ответ. введите описание изображения здесь

  2. измените строку 2 leaflet.awesome-markers.js, добавьте 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. код изменений diff показан ниже. введите описание изображения здесь

person rockXrock    schedule 29.08.2014
comment
где скачать с плагином Numbered Markers. Мне нужна полная инструкция для работы. Благодарность - person Mou; 10.08.2015
comment
и для построения точки (если вы, как и я, в первую очередь не знали об удивительных маркерах): L.marker ([50,70], {icon: jobMarkerIcon}). addTo (map); - person cmbarbu; 01.03.2019
comment
Примечание: последняя версия awesome-markers позволяет делать это с помощью текстовой опции. Больше нет необходимости делать это пошаговое руководство. - person Linpter; 05.04.2019

arrow_upward
7
arrow_downward

Другая стратегия - использовать плагин Leaflet.ExtraMarkers

Кодируйте числовой маркер следующими параметрами:

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

arrow_upward
1
arrow_downward

Если вы не хотите использовать font-awesome, здесь представлено довольно простое решение: Простые нумерованные маркеры ему не нужна дополнительная библиотека. Это уже есть в буклете. Просто создайте класс 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                               
});
person Saadat    schedule 23.02.2020