Leaflet: v: 1.1.0: url para ícones de marcadores padrão está incorreto

Criado em 5 jul. 2017 · 3Comentários · Fonte: Leaflet/Leaflet

Como reproduzir

Versão do folheto que estou usando: 1.1.0
Navegador (com versão) que estou usando: Chrome 59
SO / Plataforma (com versão) Estou usando: MacOS 10.12
Usando o folheto em conjunto com React + o modelo Rubix Admin. Usei o folheto 0.7 com a mesma configuração e sem problemas. O folheto é instalado via Bower.

Que comportamento estou esperando e que comportamento estou vendo

Os marcadores de folheto devem carregar corretamente. Em vez disso, recebo esta mensagem de erro:

OBTER http: // localhost : 8080 / bower_components / leaflet / dist / imagesmarker-icon-2x.png 404 (não encontrado)

Mas esse URL está errado porque está faltando a barra entre "images" e "marker-icon-2x.png"

Deve ser formatado com uma barra. Se eu entrar na fonte do folheto e alterar as opções do IconDefault para que se pareça com isto (Linha 6976 ...):

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

então ele funciona conforme o esperado.

Se eu reverter para 0.7.7, o problema desaparece. O que está causando esse problema?

Fonte

brambow

Comentários muito úteis

Talvez isso esteja relacionado ao meu problema que acabei de encontrar. O marcador não está carregando (ele tenta carregar como base 64).

Como reproduzir

Versão do folheto que estou usando: 1.1.0
Navegador (com versão) que estou usando: Versão 59.0.3071.115 (versão oficial) (64 bits)
SO / Plataforma (com versão) Estou usando: MacOS 10.12.5
Usando o folheto em conjunto com Angular 2. Instalado via NPM e usado @types/leaflet para configurar o projeto com Angular CLI.

Que comportamento estou esperando e que comportamento estou vendo

Para mim, a biblioteca do Folheto está carregando o ícone como 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;">

O campo src contém ")marker-icon.png no final, o que faz com que a imagem falhe ao carregar como base64 inválida. Se eu remover isso no inspetor do Chrome, o ícone aparecerá normalmente.

ethanmick em 5 jul. 2017

👍4

Todos 3 comentários

Na verdade, a melhor correção é apenas definir L.Icon.Default.imagePath para garantir que o caminho inclui a barra final. Eu acho que neste ponto, apenas me perguntando por que essa mudança aparente?

brambow em 5 jul. 2017

Talvez isso esteja relacionado ao meu problema que acabei de encontrar. O marcador não está carregando (ele tenta carregar como base 64).

Como reproduzir

Versão do folheto que estou usando: 1.1.0
Navegador (com versão) que estou usando: Versão 59.0.3071.115 (versão oficial) (64 bits)
SO / Plataforma (com versão) Estou usando: MacOS 10.12.5
Usando o folheto em conjunto com Angular 2. Instalado via NPM e usado @types/leaflet para configurar o projeto com Angular CLI.

Que comportamento estou esperando e que comportamento estou vendo

Para mim, a biblioteca do Folheto está carregando o ícone como 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;">

O campo src contém ")marker-icon.png no final, o que faz com que a imagem falhe ao carregar como base64 inválida. Se eu remover isso no inspetor do Chrome, o ícone aparecerá normalmente.

ethanmick em 5 jul. 2017

👍4

Oi pessoal, obrigado por relatar. Tenho certeza de que o problema que você está descrevendo é o mesmo que # 4968, portanto, fecharei isso como uma duplicata. Diga-me se você acredita que este é outro problema, e considerarei a reabertura.