传单地图未完全加载，当我打开检查元素时它将完全加载

Question

下面是调用onclick事件的函数

function drawMapFromWms(latt,longt){    

  document.getElementById('hrymap').innerHTML = "";      

     document.getElementById('hrymap').innerHTML = "<div id='map'></div>";
      map = L.map('map').setView([29.0,76.776695], 8);   


                 L.tileLayer.wms("http://example.com", {
             layers:'india3',

       format: 'image/png',
        transparent: true,
       attribution:"dummy"

    }).addTo(map);

          L.tileLayer.wms("http://example.com", {
             layers:'hrcm_roads',

       format: 'image/png',
        transparent: true,
       attribution:"dummy"

    }).addTo(map);

     var marker = L.marker([latt,longt]).addTo(map);

     $("#detail_content").css({'display':'block'});


  }

这是地图div创建的模态div

<div id="detail_content" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('detail_content').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div class="modal-info">
          <div id="hrymap">
    </div>
        </div>
      </div>
    </div>
  </div>
</div>

最后函数被调用

问题是当我单击按钮时，地图会部分加载，如下图所示

检查元素后，它将完全加载，如下图所示。

Answer 1

由于它是动态创建的，您的地图可能不知道其容器的大小。

尝试

map.invalidateSize();

Answer 2

setTimeout(function(){map.invalidateSize(true)}, 300);

Answer 3

您没有正确初始化地图。你从来没有设定过中心。传递地图选项参数作为第二个参数。应该是这样的：

var map = L.map('map', {center:[29.0, 76.776695], zoom:8});

这是文档。

阅读您的评论后，我相信这是因为与 HTML

class

属性关联的 CSS 覆盖了您不太具体的 CSS。就我个人而言，我只会使用更具体的 CSS，例如：

div.modal-info>div#hrymap>div#map.leaflet-container{
  width:868px; height:650px;
}

而不是

#map{
  width:868px; height:650px;
}

顺便说一下

document.getElementById('hrymap').innerHTML = "";      

和

document.getElementById('hrymap').innerHTML = "<div id='map'></div>";

都是作业。为什么要做第一个？为什么不

$('#hrymap').html("<div id='map'></div>")

？使用 jQuery 的时候就用它吧。

如果CSS方式不起作用，请尝试：

$("<div id='map'></div>").appendTo('#hrymap').css({width:'868px', height:'650px'});

请记住，使用

.appendTo()

时，后面的 jQuery 方法将影响

.appendTo()

之前的 jQuery 选择器，而

append()

后面的 jQuery 方法将影响

append()

。

当然，再次强调，您应该尽可能多地创建 HTML 结构，而不使用 JavaScript。仅在必要时临时做事。

Answer 4

我在我的 Angular 项目中使用 leaflet 来解决这个问题，您可以使用 MutationObserver 观察容器可见性的变化，并调用 invalidateSize() 重新计算地图的尺寸：

 const observer = new MutationObserver(() => {
 if (this.showMap) {
    setTimeout(() => this.map.invalidateSize(), 0);
    }
  });

 const container = document.querySelector('.map-container');
 if (container) {
  observer.observe(container, { attributes: true });
 }