Merkblatt Karte zeigt nicht richtig in bootstrap 3.0 modal

ich habe ein großes problem. ich möchte zu öffnen ein Merkblatt Karte in einem modal.
aber die Karte zeigt nicht richtig. die Kacheln werden nicht geladen.

hier ist das Skript:

http://bootply.com/98730

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Open Map</a>

<div id="myModal" class="modal">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Map</h4>
    </div>
    <div class="modal-body">
      <div class="modal-body" id="map-canvas"></div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
    </div>
  </div>
</div>

$.getScript('http://cdn.leafletjs.com/leaflet-0.7/leaflet.js',function(){

 /* map settings */
 var map = new L.Map('map-canvas');
 var cloudmade = new    L.TileLayer('http://{s}.tile.cloudmade.com/f1376bb0c116495e8cb9121360802fb0/997/256/{z}/{x} /{y}.png', {
 attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>   contributors, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
 maxZoom: 18
 });
 map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13);


 });

jede Hilfe viel apreciated

InformationsquelleAutor user2975100 | 2013-12-05

38

Ich denke, was passiert ist, dass, wenn die Karte erstellt wird, die container-Breite/- Höhe für Ihr "map-canvas" - element wurde noch nicht angepasst, um die Breite/Höhe des modalen Dialogfelds. Dies bewirkt, dass die map-Größe nicht korrekt zu sein (kleiner) als das, was es sein sollte.

Können Sie dieses Problem beheben, indem Berufung map.invalidateSize(). Dies wird die Arbeit neu zu justieren die Breite/Höhe Grenzen der L.-Map-container.

Können Sie automatisch rufen Sie diese durch Einhaken in die Veranstaltung, wo die Bootstrap-modal wird angezeigt.
```
$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });
```
Fügen Sie diesen code in JavaScript. Wenn der modal angezeigt wird, wird die Karte dann sofort seine Größe. Der timeout ist da möglicherweise werden einige Animations - /übergangs-Zeit für die modal angezeigt und Hinzugefügt werden, um den DOM.
- thx a lot. das ist eine Arbeit!
- vielleicht können Sie mir helfen mit auch dieses: stackoverflow.com/questions/20404174/... 🙂
- In einigen Fällen 10 Millisekunden sein könnte, eine sehr kleine Zeit in Anbetracht der Zeit, die den modal vollständig geladen werden. Es ist eine gute Idee, erhöhen die Zeit, die vor invalidateSize() aufgerufen, und/oder ein aktualisieren-button in der modal zu nennen, die funktionieren, wenn es geklickt wird.
- Eine 'aktualisieren' - button wäre sicherlich bieten eine gaurentee.
- Mein Problem war nicht modalen Zusammenhang aber fehlt noch. Ich hatte eine dimension hinzufügen, um den Stil. Ich wählen gehen mit Höhe. <div id='map-canvas' style='height:360px;'></div>
InformationsquelleAutor Patrick D
14

Sollten Sie wahrscheinlich vermeiden Sie die Verwendung von setTimeout mit einer zufällig gewählten Verzögerung. Einen besseren Weg, mit dem 'gezeigt.bs.modal' - Ereignis anstelle von " show.bs.modal':
```
modal.on('shown.bs.modal', function(){
    setTimeout(function() {
        map.invalidateSize();
   }, 1);
})
```
Oder verwenden Sie den Unterstrich ' s aufschieben :
```
modal.on('shown.bs.modal', function(){
    _.defer(map.invalidateSize.bind(map));
})
```
- ^ Sollte dies die akzeptierte Antwort. Zusätzlich, weil die 'gezeigt' - Ereignis wird ausgelöst, sobald das modale sichtbar ist Sie nicht mehr benötigen, in die Warteschlange die invalidateSize () - Methode tun Sie? Sie können einfach verwenden modal.auf('gezeigt.bs.modal', function () { map.invalidateSize(); }); (Quelle: getbootstrap.com/javascript/#modals-events)
- Ja, das ist besser.
InformationsquelleAutor Erik

Ich diese Problemumgehung verwenden:

.modal {
  visibility: hidden;
  display: block;
}

.modal[aria-hidden='false'] {
  visibility: visible;
  display: block;
}

InformationsquelleAutor Алексей Щербаков

Dieser arbeitete für mich -

 $('#gmap').on('shown.bs.tab', function (e) {
    //call the clear map event first
    clearMap();
    //resize the map - this is the important part for you
   map.invalidateSize(true);
   //load the map once all layers cleared
   loadMap();
})

InformationsquelleAutor Tajuddin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.