Question

有没有办法让地图完全适合边界？（或尽可能接近）。

例如，在这个jsfiddle中，即使没有填充地图，也会在点的上方和下方留下大量填充：

map.fitBounds(bounds);

$('#fit1').click(function(){ map.fitBounds(bounds); });
$('#fit2').click(function(){ map.fitBounds(bounds, {padding: [50, 50]}); });

我试图尽可能精确地将地图拟合到一组与地图形状紧密匹配的边界，而不需要额外的填充。

设置地图的角落和角落也可以，但我不认为该功能存在。

Answer 1

您很可能正在寻找地图zoomSnap选项：

强制地图的缩放级别始终为此的倍数，尤其是在fitBounds()或捏缩放后。默认情况下，缩放级别会捕捉到最接近的整数;较低的值（例如0.5或0.1）允许更大的粒度。值0表示在fitBounds或pinch-zoom之后不会捕捉缩放级别。

因为它的默认值是1，所以在你的fitBounds之后，地图会将缩放值降低到最接近的可用整数值，因此可能会在边界附近引入更多填充。

通过指定zoomSnap: 0，您要求地图不要捕捉缩放值：

var map = L.map('map', {
  zoomSnap: 0 // http://leafletjs.com/reference.html#map-zoomsnap
}).setView([51.505, -0.09], 5);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var southWest = new L.LatLng(40.712, -74.227),
  northEast = new L.LatLng(40.774, -74.125),
  bounds = new L.LatLngBounds(southWest, northEast);

L.marker([40.712, -74.227]).addTo(map);
L.marker([40.774, -74.125]).addTo(map);

map.fitBounds(bounds);

$('#fit1').click(function() {
  map.fitBounds(bounds);
});
$('#fit2').click(function() {
  map.fitBounds(bounds, {
    padding: [50, 50]
  });
});

body {
  padding: 0;
  margin: 0;
}

#map {
  height: 300px;
  margin-top: 10px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<button id="fit1">fit without bounds</button>
<button id="fit2">fit with bounds</button>
<div id="map"></div>

使地图完全适合边界

1 个答案: