使地图完全适合边界

问题描述

有没有一种方法可以使地图完全适合边界?(或尽可能接近).

Is there a way to fit the map exactly to bounds? (or as close a possible).

例如，在此jsfiddle中，即使不填充地图，在点的上方和下方也会留下很多填充:

For example, in this jsfiddle, even without padding the map leaves a lot of padding above and below the points:

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

map.fitBounds(bounds);

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

我正在尝试尽可能精确地将地图拟合到一组与地图形状紧密匹配的边界，而没有所有额外的填充.

I'm trying to fit a map as precisely as possible to a set of bounds that closely match the map shape without all the extra padding.

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

Setting a map's ne corner and sw corner would work as well, but I don't think that functionality exists.

推荐答案

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

You are very probably looking for the map zoomSnap option:

由于其默认值为 1 ，因此在 fitBounds 之后，地图会将zoom值减小到最接近的可用整数值，因此可能会在边界处引入更多填充

Because its default value is 1, after your fitBounds the map will floor down the zoom value to the closest available integer value, hence possibly introducing more padding around your bounds.

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

By specifiying zoomSnap: 0, you ask the map not to snap the zoom value:

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>

这篇关于使地图完全适合边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！