web-dev-qa-db-fra.com

Dépliant Awesome-Markers (Ajout de numéros)

J'utilise le plugin Leaflet.Awesome-Markers avec LeafletJS .

Je l'ai implémenté correctement, mais maintenant j'aimerais pouvoir utiliser des nombres de 0 à 9 pour représenter les marqueurs.

Voici une implémentation JS Fiddle pour montrer comment le plugin se comporte.

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

Le plugin permet l'utilisation d'icônes de police et d'icônes de glyphes (les deux bien sûr, n'offrent pas de numéros 0 à 9 comme icônes. argh!)

La documentation mentionne la possibilité d'utiliser extraClasses et je me demandais si quelqu'un pouvait m'orienter dans la bonne direction pour en tirer parti afin d'afficher des nombres plutôt que des icônes ou s'il y avait simplement une autre façon d'atteindre ce.

Merci d'avance pour votre aide.

MISE À JOUR:

Merci pour le commentaire @ Can .

L'auteur de marqueurs impressionnants a obtenu un autre arbre où il a ajouté exactement ce que vous cherchez marqueurs impressionnants avec des chiffres/lettres assurez-vous de saisir le JS non réduit.

javascriptdictionaryleafletfont-awesomemarkers
21
fulvio

Au lieu d'utiliser le plugin Awesome-Markers, vous pouvez suivre cet article sur la création de marqueurs numérotés dans Leaflet:

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

Le Gist associé est ici:

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

Un exemple simple de la façon dont cela fonctionnerait est le suivant:

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

J'ai essayé le plugin Numbered Markers, mais son icône n'est pas aussi jolie que les autres Awesome Markers, et rend le style de mise en page incohérent, j'ai donc apporté de petites modifications au plugin Awesome-Markers pour qu'il prenne en charge les nombres. C'est très simple.

  1. c'est un effet de plugin de marqueurs numérotés, si vous l'aimez, veuillez sauter ma réponse. enter image description here

  2. changez leaflet.awesome-markers.js ligne 2, ajoutez 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. changez leaflet.awesome-markers.js ligne 80,

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

  4. lors de la création d'une icône, appelez comme avant

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

  5. commentez les lignes 45 et 47.

  6. le résultat est comme ci-dessous la capture d'écran. enter image description here

  7. le code change les différences ci-dessous. enter image description here

35
rockXrock

Une autre stratégie consiste à utiliser le plugin Leaflet.ExtraMarkers

Codez le marqueur numérique avec ces options:

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

Si vous ne voulez pas utiliser la police génial, une solution assez simple présentée ici: Marqueurs numérotés simples il n'a pas besoin de bibliothèque supplémentaire. C'est déjà dans la brochure. Créez simplement une classe CSS avec une image d'icône comme celle-ci:

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

Ensuite, créez une icône comme celle-ci:

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                               
});
0
Saadat