Листы карты Leaflet.js (ngx-leaflet) не загружаются должным образом во всплывающем окне в Angular 8

Я использую ngx-leaflet с angular 8, чтобы показать карту во всплывающем окне, но когда я открываю всплывающее окно, плитки карты не накладываются должным образом. Я также использовал map.invalidateSize (). Но все равно это не работает.

введите здесь описание изображения

.html код для отображения всплывающего окна.

<div class="modal fade" id="collision1" role="dialog" aria-labelledby="toolenforces" aria-hidden="true">
    <div class="modal-dialog" role="document">
               <div class="row">
                 <div class="col-md-6" style="margin-top: 15px; margin-bottom: 15px;"> 
                    <div class="map1 records-map1" leaflet  [leafletOptions]="options4"
                   (leafletMapReady)="openCollision($event)"></div>
                 </div>
      </div>

.ts code

  options4 = {
layers: [
  tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  })
],
zoom: 7,
center: latLng([14.1111, 121.21111])};  

   openCollision(map : L.Map){
           setTimeout(function() {
             map.invalidateSize();
            }, 10);}

angular angular8 leaflet ngx-leaflet
person user3484089    schedule 25.05.2020    source источник
comment
Работает ли при изменении размера окна браузера?   -  person Falke Design    schedule 25.05.2020
comment
@FalkeDesign Да, он работает, когда я изменяю размер окна своего браузера. Как я могу исправить эту проблему?   -  person user3484089    schedule 25.05.2020
comment
@reblace, не могли бы вы помочь мне решить эту проблему?   -  person user3484089    schedule 27.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

установите для тайм-аута большую задержку:

openCollision(map : L.Map){
           setTimeout(function() {
             map.invalidateSize();
            }, 500);}
person Falke Design    schedule 25.05.2020
comment
Нет, не работает. Если я установлю тайм-аут на 1000, это тоже не сработает. Можем ли мы реализовать это по-другому? - person user3484089; 26.05.2020