我在我的应用程序中使用 Leafletjs 和谷歌地图图 block 。这是我的 HTML 标记:
<div class="map-wrap" style="display: none;">
<div id="map"></div>
</div>
<div class="rightNav">
<a href="#" onclick="$.expandMap();">Expand Map</a>
</div>
在 javascript 文件中,我有以下代码:
$.expandMap = function() {
if ($(".rightNav").is(':visible')){
$(".map-wrap").animate({width:'70%'},'400');
$(".rightNav").hide(0);
map.invalidateSize();
//L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container);
}
}
map 容器扩展良好。但 map 并没有扩大。
map.invalidateSize 不会扩展 map 或填充外部 div(容器)。
L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container);也失败了。
但是,如果我稍微调整浏览器窗口的大小, map 就会填充外部容器。
所以我想我会尝试使用 jQuery 以编程方式模拟窗口调整大小。但也没有扩大 map 。
请让我知道我做错了什么。
最佳答案
谢谢约沙法特。我不想要全屏 map 。我只是想稍微扩展一下 map 。
最后,我使用下面的代码让它工作:
$.expandMap = function() {
if ($(".rightNav").is(':visible')){
$(".map-wrap").animate({width:'70%'},'400');
$(".rightNav").hide(0);
setTimeout(function(){ map.invalidateSize()}, 400);
}
}
map 现在扩展以填充外部容器的扩展空间。它不是很光滑;但它有效。
关于google-maps - Leafletjs map - map.invalidateSize 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22642925/