传单地图未显示在引导 div 中答案

【问题标题】：Leaflet Map not showing in bootstrap div传单地图未显示在引导 div 中
【发布时间】：2015-09-10 21:57:28
【问题描述】：

这是一个我无法弄清楚的超级奇怪的问题。我的 div 带有地图及其 css 样式。 Leaflet 地图显示在一个矩形中，而不是在 div 中。好像 z 索引是错误的，但我无法弄清楚。 JS 在 document.ready 函数中。我在地图 div 周围添加了一个边框，只是为了展示一切是如何关闭的。

CSS：

#map {width:100%;height:100%;margin-left:10px;margin-top:40px}

HTML：

  <div id="showTravel" class="row" style="display:none">
        <div class="col-lg-12">
            <div class="wrapper wrapper-content">
        <h2 style="margin-top:-18px">All Travelers</h2>
        <div id="travelContent">
            <div id=map></div>
        </div>
            </div>
        </div>
    </div>

JS：

var map=L.map('map',{
        minZoom:2,
    maxZoom:18
}).setView([x,y],16);

var buildingIcon=L.icon({
    iconUrl:'/images/bicon.png',
    iconSize:[25,40],
    popupAnchor: [-3, -20],
    iconAnchor: [14, 38]
});

L.marker(x,y],{
    icon:buildingIcon,
    title:'town, state'
})
.bindPopup('<b>first last</b><br>Email: email address<br>Cell: phone number')
.addTo(map);

mapLink='<a href="http://openstreetmap.org">OpenStreetMap</a>';

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; ' + mapLink,
    maxZoom:18
}).addTo(map);

我已经修复了重叠问题，但最后一个问题仍然存在，即，

当页面加载并在document.ready() 上呈现地图时，地图仅在屏幕的左上角可见。如果我更改浏览器的大小（最大化、最小化），那么地图会正确刷新。

【问题讨论】：

您使用的是哪个版本的引导程序？
确认是3.3
您的#map 上可能需要position: relative; 吗？
我还会在 html 中为您的 ID 添加适当的引号。见<div id=map>
请检查您是否包含传单css文件

标签： javascript twitter-bootstrap leaflet

【解决方案1】：

地图打开后执行以下函数：

map.invalidateSize();

这将解决您的问题。

【讨论】：

地图打开时使用它不起作用，但我在地图打开后设置了超时一秒钟，然后调用它并且它起作用。谢谢！

【解决方案2】：

我将它与隐藏的 div 一起使用，单击后会出现。瓷砖也不可见，所以我将 map.invalidateSize() 添加到 div 设置为可见的 jQuery 函数中。希望对您有所帮助...

【讨论】：

【解决方案3】：

这对我有用，

$('#showTravel').on('shown.bs.modal', function (e) {
  //creation of map
})

或在显示 div 的情况下搜索并进入创建地图的函数

【讨论】：

【解决方案4】：

我在 Bootstrap 选项卡中显示地图时遇到了同样的问题。我已经使用 -

修复了它

 $('#gmap').on('shown.bs.tab', function (e) {
    //clear map first
    clearMap();
    //resize the map
   map.invalidateSize(true);
   //load the map once all layers cleared
   loadMap();
})

【讨论】：