javascript - example - Cambiar el tamaño de un mapa de folleto en el tamaño del contenedor

leaflet search

Question

Tengo un <div> contiene un mapa de folleto. En ciertos eventos, la altura del <div> se verá alterada. Me gustaría que el mapa cambie el tamaño de las nuevas dimensiones de su <div> circundante, de modo que el centro antiguo se centre en el mapa de menor o mayor tamaño. Intenté usar la función invalidateSize() , pero parece que no funciona en absoluto. ¿Cómo puedo redimensionar y centrar el mapa después de ese evento map-container-resize ?

$mapContainer.on(''map-container-resize'', function () {
   map.invalidateSize(); // doesn''t seem to do anything
});

Editar para dar más contexto:

El contenedor del mapa se diseñó inicialmente como

#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}

Después de que un usuario hace clic en un botón determinado, se muestra otro panel en la parte inferior de la página y la altura del contenedor del mapa se reducirá a algo menos del 100% (digamos 80%).

Al hacer clic en este botón, se desencadena el evento map-container-resize para que pueda cambiar el tamaño del mapa y centrarme en su centro anterior (es decir, antes de que cambie el tamaño). El mapa en sí también debería redimensionarse al 80% de su altura inicial.

El documento de APi para invalidateSize parecía ser lo que quería:

"Comprueba si el tamaño del contenedor del mapa cambió y actualiza el mapa si es así [...]"

Pero getSize un vistazo con el resultado de la función getSize antes y después de la llamada a invalidateSize, nada es diferente, el mapa permanece en su antiguo tamaño.

Answer 1

L.Map.invalidateSize() solo informa al objeto del mapa del folleto que el tamaño de su contenedor ha sido cambiado, y por lo tanto debe dibujar menos o más mosaicos del mapa. En realidad, no cambia ninguna dimensión, por ejemplo, de su contenido <div> , y no mueve el mapa. Deberías hacerlo tú mismo.

Answer 2

El problema es que el cambio de tamaño del divisor #map-container se realiza mediante una transición css. La transición aún no ha comenzado, y mucho menos ha finalizado, cuando la llamada para invalidar tamaño pasa para que el mapa del folleto no pueda reconocer ningún cambio en las dimensiones de su div circundante.

Disparar el evento map-container-resize con un retraso solucionó el problema. De esta manera :

setTimeout(function(){ map.invalidateSize()}, 400);

Answer 3

la respuesta aceptada es un poco hacky ya que depende de que el sueño sea más prolongado que la transición.

He encontrado que esto funciona bien:

$("body").on($.support.transition.end, ''#main-navbar .nav-collapse'', function(event){    
    console.log("end of the animation");
});

Answer 4

Se encontró con este problema ejecutando VueJS, Leaflet 1.2.0. El redimensionamiento no pareció completo como otros mencionaron anteriormente. Mi solución dentro de VueJS era llamar a la función nextTick:

  var vm = this
  var container = vm.$refs.container
  vm.mapStyle.width = `${vm.getElementContentWidth(container)}px`
  vm.mapStyle.height = `${vm.getElementContentHeight(container)}px`
  vm.$nextTick(() => {
    if (vm.map) vm.map.invalidateSize()
    if (vm.layerBase) vm.layerBase.redraw()
  })

Creo que javascript puro sería