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

2022-01-12 00:00:00 leaflet javascript twitter-bootstrap

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

CSS:

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

HTML:

JS:

var map=L.map('map',{最小缩放:2，最大缩放:18}).setView([x,y],16);var buildingIcon=L.icon({iconUrl:'/images/bicon.png',图标大小:[25,40]，popupAnchor: [-3, -20],图标锚:[14, 38]});L.marker(x,y],{图标:建筑图标，标题:城镇，州"}).bindPopup('<b>first last</b><br>Email: 电子邮件地址<br>Cell: 电话号码').addTo(地图);mapLink='<a href="http://openstreetmap.org">OpenStreetMap</a>';L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '地图数据和副本;' + 地图链接，最大缩放:18}).addTo(地图);

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

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

解决方案

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

map.invalidateSize();

这将解决您的问题.

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

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

This will fix your problem.

相关文章