传单地图在 bootstrap 3.0 模态中未正确显示

Question

我有一个大问题。我想在模态中打开传单地图。 但地图显示不正确。瓷砖没有加载。

这是脚本：

Answer 1

我认为发生的事情是，当创建地图时，“map-canvas”元素的容器宽度/高度尚未调整为模式对话框的宽度/高度。这会导致地图大小不正确（小于）应有的大小。

您可以通过调用

map.invalidateSize()

来解决这个问题。这将重新调整 L.Map 容器的宽度/高度范围。

您可以通过挂钩到显示 Bootstrap 模式的事件来自动调用它。

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

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

Answer 2

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

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

或者使用下划线的延迟：

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

Answer 3

我使用这个解决方法：

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

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

Answer 4

我尝试了 map.invalidateSize() 但没有修复。

终于解决了这个问题：

$('#map-modal').on('shown.bs.modal', function(event) {});

在函数中，放置与加载地图相关的代码。

Answer 5

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

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

Answer 6

这对我有用-

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

Answer 7

传单地图在加载时显示不正确可以用这个解决：

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

Answer 8

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

Answer 9

对于 vue.js 和 nuxt.js 开发者来说，可能是因为使用了 v-show 或者 v-if 但是你不应该使用 v-if 而应该使用 v-show。 之后你唯一需要的就是像这样使用仅限客户端的标签：

<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>