Leaflet Map未显示在bootstrap div中 [英] Leaflet Map not showing in bootstrap div

问题描述

这是一个我无法弄清楚的超奇怪的问题。我有我的div与地图和它的CSS风格。 Leaflet地图显示在一个矩形中，而不是div中。它好像z索引是错误的，但我无法弄明白。
JS位于document.ready函数中。我在地图div周围添加了一个边框，以显示一切都是如何。

This is a super odd problem that I can not figure out. I have my div with the map and its css styling. The Leaflet map is showing up in one rectangle and not in the div. Its as if the z index is wrong, but I can not figure it out. The JS is in the document.ready function. I added a border around the map div just to show how off everything is.

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

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

I have fixed the overlapping problem, but the last problem still exists i.e.,

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

When the page loads and the map is rendered on the document.ready() the map is only visible in the top left corner of the screen. And If I changes the size of the browser (maximize,minimize) then the map refreshes correctly.

推荐答案

打开地图后执行以下功能：

Execute the following function once the map is opened:

map.invalidateSize();

这将解决您的问题。

这篇关于Leaflet Map未显示在bootstrap div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！