Leaflet map.fitBounds 错误的居中和缩放

Question

我有这个声明：

    var base = new L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', {attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: '1234'});

    var map = L.map('map',{layers: [base]}).setView([52.066667, 19.489333], 10);

    var greenIcon = L.icon({
        iconUrl: 'http://www.pola-namiotowe.info/templates/default/images/tents/tent3.png', 
        shadowUrl: 'http://www.pola-namiotowe.info/templates/default/images/tents/shadow.png',
        iconSize:     [18, 18],
        shadowSize:   [10, 10],
        iconAnchor:   [18, 18], 
        shadowAnchor: [10, 10], 
        popupAnchor:  [-9, -18]
    });

    var marker = L.marker([53.42581578555446,17.931839817822265],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.44095727490934,18.75007320950931],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([52.8801700000000,18.782448000000000],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([52.84464,17.726771900000017],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([52.9994604041188,18.60590574232787],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.312566305499615,19.456920056591798],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.4032837,18.455872],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.34732959999999,19.4125133999999],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.5130969,19.0835098],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([52.856950626662524,18.652287784130863],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([52.8344014,18.89507709999998],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.56440623848119,17.896099185180674],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.28080989999999,18.59790099999998],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.00520523026929,18.050472618261665],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.61551925999751,17.956146306152277],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.66869384875345,17.908782317382816],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.542966518522086,17.884092696960465],{icon: greenIcon, zIndexOffset: 20}).addTo(map);
    var marker = L.marker([53.45,18.41666669999995],{icon: greenIcon, zIndexOffset: 100}).addTo(map);
    var marker = L.marker([53.661793,17.78660489999993],{icon: greenIcon, zIndexOffset: 100}).addTo(map);
    var marker = L.marker([52.7989645,18.12940290000006],{icon: greenIcon, zIndexOffset: 100}).addTo(map);

    var bounds = new L.LatLngBounds([53.42581578555446,17.931839817822265],[53.44095727490934,18.75007320950931],[52.8801700000000,18.782448000000000],[52.84464,17.726771900000017],[52.9994604041188,18.60590574232787],[53.312566305499615,19.456920056591798],[53.4032837,18.455872],[53.34732959999999,19.4125133999999],[53.5130969,19.0835098],[52.856950626662524,18.652287784130863],[52.8344014,18.89507709999998],[53.56440623848119,17.896099185180674],[53.28080989999999,18.59790099999998],[53.00520523026929,18.050472618261665],[53.61551925999751,17.956146306152277],[53.66869384875345,17.908782317382816],[53.542966518522086,17.884092696960465],[53.45,18.41666669999995],[53.661793,17.78660489999993],[52.7989645,18.12940290000006], {padding: [50,50], maxZoom: 19,});

map.fitBounds(bounds);

Example in fiddle

我不知道我做错了什么。我的缩放比例太高，地图的可见边界上没有所有标记。

Answer 1

与其自己计算边界，为什么不将所有标记添加到 featureGroup，然后让 leaflet 从特征组中计算自己的边界？

var featureGroup = new L.featureGroup();

L.marker([53.56440623848119,17.896099185180674],{icon: greenIcon, zIndexOffset: 20}).addTo(featureGroup); // note that "var marker =" becomes useless because you don't use var declaration afterwards;
// do this with all markers

map.addLayer(featureGroup);
map.fitBounds(featureGroup.getBounds());

Leaflet map.fitBounds 错误的居中和缩放

Leaflet map.fitBounds bad center and zoom

javascript

maps

zooming

bounds

leaflet