Javascript “数据切换”选项卡不下载传单地图
我正在使用选项卡显示清晰的内容,但其中一个停止下载,因为它位于数据切换选项卡中。这是一张单张地图。 代码如下:Javascript “数据切换”选项卡不下载传单地图,javascript,twitter-bootstrap,tabs,toggle,leaflet,Javascript,Twitter Bootstrap,Tabs,Toggle,Leaflet,我正在使用选项卡显示清晰的内容,但其中一个停止下载,因为它位于数据切换选项卡中。这是一张单张地图。 代码如下: 导航条码: <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li> <li><a data-toggle="tab" href="#
导航条码:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
<li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">Lorem ipsum</div>
<div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>
乱数假文
**//请参阅下面的脚本\\**
脚本:
<div id="carteBenef"></div>
<script type="text/javascript">
$(document).ready(function () {
var map = new L.Map('carteBenef');
var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>)
map.addLayer(cloudmade).setView(iades, 15);
var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>);
var benef = new L.Marker(benefLocation);
map.addLayer(benef);
benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup();
});
</script>
$(文档).ready(函数(){
var map=新的L.map('carteBenef');
var cloudmadeUrl='http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
子域=['otile1'、'otile2'、'otile3'、'otile4'],
cloudmadeAttrib=‘由和贡献者提供的数据、图像和地图信息’;
var cloudmake=new L.TileLayer(cloudmadeeurl,{maxZoom:18,attribute:cloudmadeAttrib,subdomains:subdomains});
var iades=新L.LatLng()
map.addLayer(CloudMake).setView(iades,15);
var benefLocation=新的L.LatLng();
var benef=新的L.标记(benefLocation);
map.addLayer(benef);
benef.bindPopup(“”.openPopup();
});
地图在我把它放进标签之前就已经出现了,有人知道为什么它现在不工作了吗?谢谢=)欢迎来到SO
如果在调整浏览器窗口大小后,突然正常工作,则您会遇到经典的“地图初始化时地图容器大小无效”:为了正常工作,手册会在初始化地图时读取地图容器大小(L.map(“mapContainerId”)
)
如果您的应用程序隐藏该容器(通常通过CSSdisplay:none;
,或某些框架选项卡/modal/which…)或稍后更改其尺寸,传单将不会知道新的尺寸。因此,它将无法正确渲染。通常,它只下载它认为显示的容器的一小部分。对于在贴图初始化时完全隐藏的容器,这可以是左上角的单个平铺
当将贴图容器嵌入到“选项卡”或“模式”面板中时,可能会使用流行的框架(引导、角度、离子等)出现此错误
传单将侦听浏览器窗口调整大小事件,并在事件发生时再次读取容器大小。这就解释了为什么贴图会突然改变窗口大小
您还可以通过在显示选项卡面板(例如,单击选项卡按钮上添加侦听器)时调用手动触发此更新,至少在第一次使用正确的尺寸呈现容器时
至于实现tab按钮click listener,请在该主题上执行新的搜索:对于大多数流行的框架,您应该有足够的资源来解决这个问题。首先,感谢@ghybs对传单地图在这些情况下无法正确显示的原因所作的解释 对于那些尝试@ghybs答案失败的用户,您应该尝试调整浏览器的大小,而不是调用map对象的方法:
window.dispatchEvent(new Event('resize'));
正如@MarsAndBack所说,此修复程序可能会导致传单的invalidateSize提供的平移/动画/etc功能出现问题。我遇到此问题是因为我使用了
模式引导程序。而且它也没有解决。我尝试了map.invalidateSize()
和window.dispatchEvent(新事件('resize'))代码>但不是固定的
最后,它通过以下方式固定:
$('#map modal').on('show.bs.modal',function(event){})代码>
'show.bs.modal'
事件的意思是当modal完全加载且大小没有任何混乱时,现在就在里面编写代码。对于像我这样的人来说,他们无法用宝贵的@ghybs解释(map.invalidateSize()
)来解决这个挑战,并且能够用@gangai johann one来完成,你仍然有机会用正确的方法做这件事。将invalidate指令放在setTimeout内,因为分派该指令可能为时过早
setTimeout(() => {
this.$refs.mymap.mapObject.invalidateSize()
}, 100)
有关详细说明,请参阅答案。这正是我遇到的问题,谢谢@Ned,请将带有map.invalidateSize()
的修复代码附加到您的问题中嗨,我添加了map.invalidateSize(),但它给了我一个错误:无法读取未定义的属性“\u传单\u pos”,知道为什么吗?嗨@akshayKishore,请随意打开一个新问题,提供您具体问题的详细信息。这是一个方便的修复,然而,你们将错过传单的invalidateSize提供的平移/动画/等功能。