Question

在传单和地图框中，我想摆脱地图上方和下方的两个灰色条，如下图所示。当我放大时，我的#map DOM元素占据整个屏幕并且灰色条消失（例如，zoomLevel = 3）。因此，灰色条似乎是由于zoomLevel具有给定高度（以px为单位）的小块而导致的小于我的屏幕。

我想保持相同缩放级别的图块，但要确保图块的高度至少覆盖整个屏幕。

这是我的地图设置代码：

                vm.map = L.map('map', {
                    center: [35, 15],
                    zoom: 2,
                    maxZoom: 21,
                    scrollWheelZoom: true,
                    maxBounds: [
                    [89.9, 160.9],
                    [-89.9, -160.9]
                    ],
                    zoomControl: false,
                    noWrap: true,
                    zoomAnimation: true,
                    markerZoomAnimation: true,
                });

我使用的是角度，我的屏幕尺寸为1920 x 1080

Answer 1

听起来您需要计算地图仅显示85°N和85°S之间区域的最小缩放级别。

getBoundsZoom() method of L.Map有助于此，例如：

var bounds = L.latLngBounds([[85, 180],[-85, -180]]);
var wantedZoom = map.getBoundsZoom(bounds, true);
var center = bounds.getCenter();
map.setView(center, wantedZoom);

请注意，这是一个通用的解决方案，适用于任何大小的地图容器。

您还可以将地图的minZoom设置为该值，并尝试使用小数缩放（请参阅zoomSnap选项）。如果您希望用户无法在绘制区域外拖动，请使用地图的maxBounds选项，例如[[85, Infinity],[-85, -Infinity]]。

（如果你想知道为什么85°N和85°S，请阅读https://en.wikipedia.org/wiki/Web_Mercator）

宣传单 - 获取覆盖全屏的地图

1 个答案: