现在我要做的是根据屏幕尺寸放大和缩小地图,这样你就可以随时看到世界上每块土地。我并不担心重复的世界,但我理想的是希望它基本上集中在非洲西海岸,就像典型的地图一样。
我的内容如下:
function fitMap() {
if ($) {
var height = $(window).height();
var width = $(window).width();
//Put map into full screen
$('#map').css({position: "absolute", top: "0", left: "0", right: "0", bottom:"0"});
if ((height < 586 && width < 1095) || height < 325 || (width < 700 && height > 586)) {
map.setZoom(1);
}
else if (width >= 1500 && height > 900) {
map.setZoom(3);
}
else {
map.setZoom(2);
}
}
};
//Fit the map more appropriately to screen sizes.
window.onload = fitMap;
window.onresize = fitMap;
我发现这真的很酷,如果我试着将它放在一个1920x1080到一个小的1024x768上,它可以工作但我没有在Leaflet中看到任何允许我这样做的东西。我的一个想法是创建一个不可见的功能组,基本上从日期线到日期线创建一个边界,然后像这样使用.getBounds()
:Centering Leaflet map with getbounds and related issues
有没有人有更好的解决方案?
答案 0 :(得分:6)
Leaflet提供fitWorld()
method来做这件事。
您可以通过拨打map.fitWorld();
来使用此功能,此处为full example。
答案 1 :(得分:0)
请注意,fitWorld
考虑zoomSnap
,因此如果您使用默认值1
并在调整大小时调用fitZoom
,则地图不会非常适合很多情况。将zoomSnap
降低到适合您的值。
我还建议使用此方法将animate
设置为false:
map.on( 'resize', () => {
map.fitWorld( { animate: false } );
} );