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

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

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

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

这是docs。

阅读您的评论后，我相信这是因为与 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 2

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

试试

map.invalidateSize();

Answer 3

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