将地图精确地拟合到边界

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 或捏合缩放后不会被捕捉。

因为它的默认值是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>