Leaflet: v : 1.1.0 : l'URL vers les icônes de marqueur par défaut est incorrecte

Créé le 5 juil. 2017 · 3Commentaires · Source: Leaflet/Leaflet

Comment reproduire

Version de la brochure que j'utilise : 1.1.0
Navigateur (avec version) que j'utilise : Chrome 59
OS/Plateforme (avec version) que j'utilise : MacOS 10.12
Utilisation du dépliant en conjonction avec React + le modèle Rubix Admin. J'ai utilisé la brochure 0.7 avec cette même configuration et aucun problème. Le dépliant est installé via Bower.

Quel comportement j'attends et quel comportement je vois

Les marqueurs de dépliants doivent se charger correctement. A la place j'obtiens ce message d'erreur :

OBTENIR http://localhost :8080/bower_components/leaflet/dist/imagesmarker-icon-2x.png 404 (non trouvé)

Mais cette URL est fausse car il manque la barre oblique entre "images" et "marker-icon-2x.png"

Il doit être formaté avec la barre oblique. Si je vais dans la source Leaflet et modifie les options IconDefault pour qu'il ressemble à ceci (ligne 6976...) :

    iconUrl:       '/marker-icon.png',
    iconRetinaUrl: '/marker-icon-2x.png',
    shadowUrl:     '/marker-shadow.png',

alors cela fonctionne comme prévu.

Si je reviens à 0.7.7, ce problème disparaît. Qu'est-ce qui cause ce problème ?

Source

brambow

Commentaire le plus utile

C'est peut-être lié à mon problème que je viens de rencontrer. Le marqueur ne se charge pas (il essaie de se charger en base 64).

Comment reproduire

Version de la brochure que j'utilise : 1.1.0
Navigateur (avec version) que j'utilise : Version 59.0.3071.115 (version officielle) (64 bits)
OS/Plateforme (avec version) que j'utilise : MacOS 10.12.5
Utilisation du dépliant en conjonction avec Angular 2. Installé via NPM et utilisé @types/leaflet pour configurer le projet avec Angular CLI.

Quel comportement j'attends et quel comportement je vois

Pour moi, la bibliothèque Leaflet charge l'icône en Base 64 :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB[CUT_FOR_BREVITY]ASUVORK5CYII=&quot;)marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(225px, 197px, 0px); z-index: 197; outline: none;">

Le champ src contient ")marker-icon.png à la fin, ce qui empêche le chargement de l'image en tant que base64 non valide. Si je supprime cela dans l'inspecteur Chrome, l'icône apparaît normalement.

ethanmick le 5 juil. 2017

👍4

Tous les 3 commentaires

En fait, la meilleure solution consiste simplement à définir L.Icon.Default.imagePath pour s'assurer que le chemin inclut la barre oblique finale. Je suppose qu'à ce stade, je me demande simplement pourquoi ce changement apparent ?

brambow le 5 juil. 2017

C'est peut-être lié à mon problème que je viens de rencontrer. Le marqueur ne se charge pas (il essaie de se charger en base 64).

Comment reproduire

Version de la brochure que j'utilise : 1.1.0
Navigateur (avec version) que j'utilise : Version 59.0.3071.115 (version officielle) (64 bits)
OS/Plateforme (avec version) que j'utilise : MacOS 10.12.5
Utilisation du dépliant en conjonction avec Angular 2. Installé via NPM et utilisé @types/leaflet pour configurer le projet avec Angular CLI.

Quel comportement j'attends et quel comportement je vois

Pour moi, la bibliothèque Leaflet charge l'icône en Base 64 :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB[CUT_FOR_BREVITY]ASUVORK5CYII=&quot;)marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(225px, 197px, 0px); z-index: 197; outline: none;">

ethanmick le 5 juil. 2017

👍4

Salut les gars, merci pour le signalement. Je suis à peu près certain que le problème que vous décrivez est le même que # 4968, donc je ferme ceci en tant que doublon. S'il vous plaît dites-moi si vous pensez qu'il s'agit d'un autre problème, et j'envisagerai de rouvrir.