传单地图未显示在引导 div 中 [英] Leaflet Map not showing in bootstrap div

问题描述

这是一个我无法弄清楚的超级奇怪的问题.我的 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.

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