我认为是这样的，当创建Map时，您的'map-canvas'元素的容器宽度/高度还没有调整到模式对话框的宽度/高度。这导致Map的大小不正确（小于）。
你可以通过调用map.invalidateSize()来修复这个问题。这将重新调整L.Map容器的宽度/高度边界。
您可以通过挂接到显示Bootstrap模态的事件来自动调用它。

$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });

将此代码插入JavaScript。当显示模态时，Map将使其大小无效。超时是因为模态显示和添加到DOM可能需要一些动画/过渡时间。

您可能应该避免将setTimeout与随机选择的延迟一起使用。使用'showed.bs.modal'事件而不是'show.bs. modal'的更好方法是：

modal.on('shown.bs.modal', function(){
    setTimeout(function() {
        map.invalidateSize();
   }, 1);
})

或者使用下划线的defer：

modal.on('shown.bs.modal', function(){
    _.defer(map.invalidateSize.bind(map));
})

我使用以下解决方法：

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

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

我尝试了map.invalidateSize（），但没有修复。
最后它被这样修正：
$（'#map-modal'）.on（'显示.bs.模态'，函数（事件）{}）;
在函数中，放置与加载Map相关的代码。

这对我很有效-

$('#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();
})

这对我很有效，你可以在这里阅读

map.whenReady(() => {
    console.log('Map ready');
    setTimeout(() => {
        map.invalidateSize();
    }, 0);
});

在加载时传单Map不正确显示可以通过以下方式解决：

var mapid = $(this).find('[id^=leaflet-map]').attr('id');
  var map = settings.leaflet[mapid].lMap;
  map.invalidateSize();

我如何解决此问题：在主窗口中初始化Map。然后将Map移动到打开的模式。

对于vue.js和nuxt.js开发人员，可能是因为使用了v-show或v-if，但不必担心，您唯一要做的就是使用如下的客户端专用标记：

<client-only>
<div v-show="someVariable" id="vShowOrVIfExample">
<div id="map-wrap" style="height: 100vh">
   <l-map :zoom=13 :center="[55.9464418,8.1277591]">
     <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
     <l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
   </l-map>
 </div>
</div>
</client-only>