2017-10-25 10 views
1

Gibt es eine Möglichkeit, die Karte genau an die Grenzen anzupassen? (oder so nahe wie möglich).Karte genau an die Grenzen anpassen

Zum Beispiel in diesem jsfiddle, auch ohne die Karte Polsterung lässt viel Polsterung oberhalb und unterhalb der Punkte:

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

map.fitBounds(bounds); 

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

Ich versuche, eine Karte zu passen, so genau wie möglich zu einem Satz von Grenzen, die der Kartenform ohne die zusätzliche Auffüllung entsprechen.

Die Ne- und Sw-Ecke einer Karte zu setzen würde auch funktionieren, aber ich glaube nicht, dass Funktionalität existiert.

Antwort

2

Sie suchen sehr wahrscheinlich für die Karte zoomSnap Option:

Kräfte der Zoomstufe der Karte ein Vielfaches davon immer, vor allem direkt nach einem fitBounds() oder Pinch-Zoom. Standardmäßig wird die Zoomstufe auf die nächste Ganzzahl festgelegt. niedrigere Werte (z. B. 0.5 oder 0.1) ermöglichen eine größere Granularität. Ein Wert von 0 bedeutet, dass die Zoomstufe nach fitBounds oder einem Pinch-Zoom nicht erfasst wird.

Da der Standardwert 1 ist, nach dem fitBounds Die Karte Boden des Zoomwert auf den nächsten verfügbaren Integer-Wert, also möglicherweise mehr Polsterung um Ihre Grenzen einzuführen.

von Einzelheiten enthält zoomSnap: 0, fragen Sie die Karte nicht den Zoomwert zu schnappen:

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/[email protected]/dist/leaflet.css"> 
 
<script src="https://unpkg.com/[email protected]/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>

Verwandte Themen