Leaflet: v: 1.1.0: la URL de los iconos de marcador predeterminados es incorrecta

Creado en 5 jul. 2017 · 3Comentarios · Fuente: Leaflet/Leaflet

Como reproducir

Versión de folleto que estoy usando: 1.1.0
Navegador (con la versión) que estoy usando: Chrome 59
SO / Plataforma (con versión) Estoy usando: MacOS 10.12
Utilizando el folleto junto con React + la plantilla Rubix Admin. He usado el folleto 0.7 con esta misma configuración y sin problemas. El folleto se instala a través de Bower.

Qué comportamiento estoy esperando y qué comportamiento estoy viendo

Los marcadores de folletos deben cargarse correctamente. En su lugar, recibo este mensaje de error:

OBTENGA http: // localhost : 8080 / bower_components / leaflet / dist / imagesmarker-icon-2x.png 404 (no encontrado)

Pero esa URL es incorrecta porque falta la barra entre "imágenes" y "icono de marcador-2x.png".

Debe formatearse con la barra. Si entro en la fuente del Folleto y cambio las opciones de IconDefault para que se vea así (Línea 6976 ...):

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

entonces funciona como se esperaba.

Si vuelvo a 0.7.7, este problema desaparece. ¿Qué está causando este problema?

Fuente

brambow

Comentario más útil

Quizás esto esté relacionado con el problema que acabo de encontrar. El marcador no se está cargando (intenta cargar como base 64).

Como reproducir

Versión de folleto que estoy usando: 1.1.0
Navegador (con versión) Estoy usando: Versión 59.0.3071.115 (Compilación oficial) (64 bits)
SO / Plataforma (con versión) Estoy usando: MacOS 10.12.5
Usando el folleto junto con Angular 2. Se instaló a través de NPM y usó @types/leaflet para configurar el proyecto con Angular CLI.

Qué comportamiento espero y qué comportamiento veo

Para mí, la biblioteca de folletos está cargando el ícono 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;">

El campo src contiene ")marker-icon.png al final, lo que hace que la imagen no se cargue como base64 no válida. Si elimino eso en el inspector de Chrome, el icono aparece normalmente.

ethanmick en 5 jul. 2017

👍4

Todos 3 comentarios

En realidad, una mejor solución es simplemente configurar L.Icon.Default.imagePath para asegurarse de que la ruta incluya la barra final. Supongo que en este punto, me pregunto por qué este cambio aparente.

brambow en 5 jul. 2017

Quizás esto esté relacionado con el problema que acabo de encontrar. El marcador no se está cargando (intenta cargar como base 64).

Como reproducir

Versión de folleto que estoy usando: 1.1.0
Navegador (con versión) Estoy usando: Versión 59.0.3071.115 (Compilación oficial) (64 bits)
SO / Plataforma (con versión) Estoy usando: MacOS 10.12.5
Usando el folleto junto con Angular 2. Se instaló a través de NPM y usó @types/leaflet para configurar el proyecto con Angular CLI.

Qué comportamiento espero y qué comportamiento veo

Para mí, la biblioteca de folletos está cargando el ícono 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;">

El campo src contiene ")marker-icon.png al final, lo que hace que la imagen no se cargue como base64 no válida. Si elimino eso en el inspector de Chrome, el icono aparece normalmente.

ethanmick en 5 jul. 2017

👍4

Hola chicos, gracias por informarnos. Estoy bastante seguro de que el problema que está describiendo es el mismo que el # 4968, así que lo cierro como duplicado. Por favor, dígame si cree que este es otro problema y consideraré la reapertura.