传单地图未显示在引导 div 中
时间：2023-08-09问题描述
这是一个我无法弄清楚的超级奇怪的问题.我的 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 © ' + 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 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！
相关文章
检查一个多边形点是否在传单中的另一个内部Check if a polygon point is inside another in leaflet(检查一个多边形点是否在传单中的另一个内部)- 更改传单标记群集图标颜色，继承其余默认 CSSChanging leaflet markercluster icon color, inheriting the rest of the default CSS properties(更改传单标记群集图标颜色，继承其余默认
- 触发点击传单标记Trigger click on leaflet marker(触发点击传单标记)
- 如何更改 LeafletJS 中的默认加载磁贴颜色?How can I change the default loading tile color in LeafletJS?(如何更改 LeafletJS 中的默认加载磁贴颜色?)
- 将外部geojson添加到传单层Add external geojson to leaflet layer(将外部geojson添加到传单层)
- 将 Leaflet 图层控件添加到侧边栏Adding Leaflet layer control to sidebar(将 Leaflet 图层控件添加到侧边栏)