Dépliant Génial-Marqueurs (Ajout De Numéros)

Je suis en utilisant le Dépliant.Génial-Marqueurs plugin avec LeafletJS.

J'ai mis en œuvre correctement, mais maintenant, je voudrais être en mesure d'utiliser les chiffres de 0 à 9 pour représenter des marqueurs.

Voici un JS Fiddle mise en œuvre de montrer comment le plugin se comporte.

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

Le plugin permet l'utilisation de font-awesome icônes et glyphe d'icônes (bien sûr, ne proposent pas de 0 - 9 numéros sous forme d'icônes. argh!)

La documentation mentionne la possibilité d'utiliser extraClasses et je me demandais si quelqu'un pouvait me diriger dans la bonne direction quant à la façon de tirer parti de cela pour l'affichage des nombres plutôt que des icônes ou s'il est simplement un autre moyen d'y parvenir.

Merci d'avance pour votre aide.

Mise à JOUR:

Merci pour le commentaire @Pouvez.

L'auteur de super-marqueurs a un autre arbre où il ajouté exactement ce que vous cherchez génial-marqueurs avec des chiffres/lettres assurez-vous de saisir le unminified JS.

L'auteur de super-marqueurs a un autre arbre où il ajouté exactement ce que vous cherchez, awesome-marqueurs avec des chiffres/lettres assurez-vous de saisir le unminified JS
De ma faute, n'est-ce pas essayé avant de commenter. Je ne sais pas pourquoi mais je ne pouvais pas le faire fonctionner. Donc je suis en utilisant rockXrock de la solution, et il fonctionne comme un charme, merci pour ça

InformationsquelleAutor fuzz | 2014-03-24

14

Au lieu d'utiliser l'Impressionnant-les Marqueurs de plugin, vous pouvez suivre cet article sur la création de marques numérotées dans la fiche:

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

Les associés Essentiel est ici:

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

Un exemple simple de la façon dont ce serait le travail est comme suit:
```
//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'})
});
```
- Attention lors de l'utilisation de cette solution. Son sous licence "Creative Commons Attribution-Noncommercial-Share Alike 3.0 États-unis de Licence." et n'est donc pas utilisable dans un contexte commercial.
InformationsquelleAutor Ben Smith
33

J'ai essayé de marques Numérotées plugin, mais l'icône n'est pas assez que d'autres Impressionnant Marqueurs, et faire la mise en page de style incohérent, alors j'ai fait de petits changements dans Awesome-Marqueurs de plugin pour le rendre numéros de l'assistance. C'est très simple.
1. c'est Numérotée Marqueurs plugin effet, si vous l'aimez s'il vous plaît ignorer ma réponse.
2. changement leaflet.awesome-markers.js ligne 2, ajouter du code 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. changement 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 de l'icône, de l'appeler comme avant
```
var jobMarkerIcon = L.AwesomeMarkers.icon({
icon: '',
markerColor: 'darkblue',
prefix: 'fa',
html: (i+1)
});
```
5. en commentaire la ligne 45 et 47.
6. le résultat est comme la capture d'écran ci-dessous.
7. modifications du code de diff montre ci-dessous.
- Merci beaucoup pour cet incroyable parcours détaillé (et le code diff). J'ai suivi de près et a réalisé exactement ce que je voulais!
- Tks pour cela, très utile.
- Merci rockXrock, fonctionne très bien =)
- où télécharger avec des marques Numérotées plugin. j'ai besoin d'instruction complet pour travailler avec. merci
- et à la point de la parcelle (si comme moi vous ne connaissiez pas génial marqueurs en premier lieu): L. marqueur([50,70], {icône: jobMarkerIcon}).addTo(carte);
- Remarque : la dernière version de super-marqueurs permet de le faire avec l'option de texte. Il n'y a pas besoin de faire cette procédure pas à pas plus.
InformationsquelleAutor rockXrock

Une autre stratégie consiste à utiliser la Dépliant.ExtraMarkers plugin

Code numérique marqueur 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);

InformationsquelleAutor jackdougherty

Vous devez vous connecter pour publier un commentaire.