javascript - La pestaña Alternar datos no descarga el mapa de folleto

twitter-bootstrap tabs

Question

Estoy usando pestañas para mostrar contenido claro, pero una de ellas dejó de descargar bien ya que está en la pestaña de alternar datos. Es un mapa de folleto. Aquí está el código:

Código de barra de navegación:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">Lorem ipsum</div>
    <div id="carte" class="tab-pane fade"> **//see script below//** </div>
</div>

Guión:

<div id="carteBenef"></div>
      <script type="text/javascript">
          $(document).ready(function () {
              var map = new L.Map(''carteBenef'');
              var cloudmadeUrl = ''http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png'',
                     subDomains = [''otile1'', ''otile2'', ''otile3'', ''otile4''],
                     cloudmadeAttrib = ''Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>'';
              var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
              var iades = new L.LatLng(<?php echo $beneficiaire->latitude . '', '' . $beneficiaire->longitude; ?>)
              map.addLayer(cloudmade).setView(iades, 15);
              var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . '', '' . $beneficiaire->longitude; ?>);
              var benef = new L.Marker(benefLocation);
              map.addLayer(benef);
              benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . '' '' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup();
          });
      </script>

El mapa aparecía mucho antes de ponerlo en la pestaña, ¿alguien tiene una idea de por qué no funciona ahora? Gracias =)

Answer 1

@armani: es más complejo cuando el modal se llena dinámicamente (asincrónicamente). Lo arreglé con un escucha justo antes de inicializar el folleto utilizando una función de suspensión personalizada:

$(''#map-modal'').on(''shown.bs.modal'', function() {
  while($(''#map'').length == 0) {
    sleep(1000);
  }
  var map = new L.Map(''map'');
})

Answer 2

Bienvenido a SO!

Si su mapa de Leaflet de repente funciona correctamente después de cambiar el tamaño de la ventana de su navegador , experimenta el clásico "tamaño del contenedor del mapa no válido en la inicialización del mapa": para que funcione correctamente, Leaflet lee el tamaño del contenedor del mapa cuando inicializa el mapa ( L.map("mapContainerId") ).

Si su aplicación oculta ese contenedor (generalmente a través de la display: none; CSS display: none; o alguna pestaña de marco / modal / lo que sea ...) o luego cambia sus dimensiones, Leaflet no se dará cuenta del nuevo tamaño. Por lo tanto, no se representará correctamente. Por lo general, descarga mosaicos solo para la fracción del contenedor que cree que se muestra. Este puede ser un único mosaico en la esquina superior izquierda en el caso de un contenedor que estaba completamente oculto en el momento de la inicialización del mapa.

Este error a menudo surge cuando se incrusta el contenedor del mapa en un panel "pestaña" o "modal", posiblemente utilizando marcos populares (Bootstrap, Angular, Ionic, etc.).

El folleto escucha el evento de cambio de tamaño de la ventana del navegador y vuelve a leer el tamaño del contenedor cuando sucede. Esto explica por qué el mapa de repente funciona en el cambio de tamaño de la ventana.

También puede activar manualmente esta actualización llamando a map.invalidateSize() cuando se muestra el panel de pestañas (por ejemplo, agregue un oyente al hacer clic en el botón de pestañas), al menos la primera vez que el contenedor se representa con sus dimensiones correctas.

En cuanto a la implementación del botón de escucha de clic de pestaña, realice una nueva búsqueda en SO sobre ese tema: debe tener muchos recursos disponibles para ese asunto, para la mayoría de los marcos populares.

Answer 3

Primero, gracias @ghybs por su buena explicación de por qué los mapas de folleto no se muestran correctamente en estos casos.

Para aquellos que intentaron sin éxito la respuesta de @ ghybs, debe intentar cambiar el tamaño de su navegador en lugar de llamar a un método del objeto de mapa:

window.dispatchEvent(new Event(''resize''));

Esa solución funcionó para mí, y debería funcionar en todos los casos.

Answer 4

Tengo este problema porque usé modal bootstarp. y no se resolvió de todos modos. probé map.invalidateSize() y window.dispatchEvent(new Event(''resize'')); pero no arreglado

finalmente lo arregló por esto:

$(''#map-modal'').on(''shown.bs.modal'', function(event) {});

''shown.bs.modal'' evento ''shown.bs.modal'' significa que cuando modal se carga por completo y no confunde el tamaño, ahora dentro de eso escriba sus códigos.