使地图完全适合边界

Question

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

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

http://jsfiddle.net/BC7q4/444/

map.fitBounds(bounds);

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

我正在尝试将地图尽可能精确地拟合到一组与地图形状非常匹配的边界，而无需所有额外的填充。

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

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>