La pestaña de alternancia de datos no descarga el mapa del folleto
Estoy usando pestañas para mostrar contenido claro, pero una de ellas dejó de descargarse bien porque está en la pestaña de alternancia de datos. Es un mapa de folleto. Aquí está el código:
Código de la 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>
Guion :
<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 que lo pusiera en la pestaña. ¿Alguien tiene una idea de por qué no funciona ahora?
Si su mapa de Leaflet de repente funciona correctamente después de cambiar el tamaño de la ventana de su navegador , entonces experimentará el clásico "tamaño del contenedor de mapa no válido en la inicialización del mapa": para funcionar correctamente, Leaflet lee el tamaño del contenedor de mapa cuando inicializa el mapa ( L.map("mapContainerId")).
Si su aplicación oculta ese contenedor (normalmente a través de CSS display: none;, o alguna pestaña del marco/modal/lo que sea…) o luego cambia sus dimensiones, Leaflet no será consciente del nuevo tamaño. Por lo tanto, no se renderizará correctamente. Normalmente, descarga mosaicos solo para la fracción del contenedor que cree que se muestra. Puede ser un solo 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 surge a menudo al incrustar el contenedor del mapa en una "pestaña" o panel "modal", posiblemente utilizando frameworks populares (Bootstrap, Angular, Ionic, etc.).
Leaflet 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 al cambiar el tamaño de la ventana.
También puede activar manualmente esta actualización llamando map.invalidateSize()cuando se muestra el panel de pestañas (por ejemplo, agregar un oyente al hacer clic en el botón de pestaña), al menos la primera vez que el contenedor se representa con sus dimensiones correctas.
En cuanto a implementar el detector de clics en el botón de pestaña, realice una nueva búsqueda en SO sobre ese tema: debería tener muchos recursos disponibles para la mayoría de los marcos populares.
Primero, gracias @ghybs por tu buena explicación de por qué los mapas del Folleto no se muestran correctamente en estos casos.
Para aquellos que intentaron sin éxito la respuesta de @ghybs, deberían intentar cambiar el tamaño de su navegador en lugar de llamar a un método del objeto del mapa:
window.dispatchEvent(new Event('resize'));
Como dijo @MarsAndBack, esta solución puede causar problemas en las funciones de panorámica/animación/etc que proporciona invalidateSize de Leaflet.
Tengo este problema porque usé modalbootstarp. y no se resolvió de todos modos. Lo intenté map.invalidateSize()y window.dispatchEvent(new Event('resize'));no lo solucioné.
finalmente se solucionó con esto:
$('#map-modal').on('shown.bs.modal', function(event) {});
'shown.bs.modal'El evento significa que cuando modal está completamente cargado y no hay confusión sobre el tamaño, ahora dentro de eso escribe tus códigos.
