6

现在我要做的是根据屏幕大小放大和缩小地图，这样你就可以基本上看到世界上的每一块土地。我不担心重复的世界，但理想情况下，我希望它基本上以非洲西海岸为中心，就像一张典型的地图。

我有如下所示的东西：

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

有没有人有更好的解决方案？

4

2 回答 2

7

Leaflet 提供了一种fitWorld()方法来做到这一点。

你可以通过调用来使用它map.fitWorld();，这里有一个完整的例子。

于 2013-07-24T17:15:11.713 回答
0

请注意，这已fitWorld考虑zoomSnap在内，因此如果您使用默认值1并调用fitZoom调整大小，则地图在很多情况下都不太适合。降低zoomSnap到适合您的值。我还建议animate使用这种方法设置为 false：

map.on( 'resize', () => {
    map.fitWorld( { animate: false } );
} );
于 2018-02-02T15:28:20.407 回答