web-dev-qa-db-ja.com

Leaflet.jsはパディング付きでfitBoundsですか？

このようなリーフレットマップでfitBoundsオプションを設定しようとしています。

var bounds = new L.LatLngBounds([[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]]);
map.fitBounds(bounds, { padding: [20, 20] });

しかし、これはパディングを追加していないようです？少なくともマップの「ズームレベル」は変更されず、常に端に2つのポイントが表示されます（つまり、1つは右上、もう1つは左下）。一部のマーカーセットでは、問題なく機能し、ズームはかなり離れたレベルにあり、すべてがきれいに表示されます。ただし、アイテムが互いに非常に近い場合、「パディング」を適用できない限り、拡大しすぎているようです。

また、境界がそのように正しいかどうかわかりませんか？代わりにちょうど使用する必要があります：

var bounds = [[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]];
leaflet
32
dan2k3k4

map.fitBounds(bounds, {padding: []})は動作するはずです。パディングを例えばに変更することをお勧めします。 [50, 50]、パディング値が小さすぎる可能性があります。

これを確認してください JSFiddleの例 。

51
yarl

この問題に出会いました。私が理解したように、パディングはズームによって制御されます。私の例では、10未満のすべてのパディング設定で違いはありません。パディングが10になると、マップは1レベル縮小され、パディングが行われます。さらにパディング値を大きくしても、他のズームアウトレベルに達するほど大きくなるまで影響はありません。

7
T.G. Dallas

FWIでは、次のようにマップに最大ズームレベルを設定することもできます。

var map = L.mapbox.map('map', 'mapbox.emerald', {
    maxZoom: 16
});

これにより、マーカーが近すぎる場合にマップが拡大しすぎるのを回避できます。

2
Joe Black

リーフレットは、デフォルトで整数値のズームレベル間でのみズームします。過去のバージョン1.0.0、「部分ズーム」は「zoomSnap」パラメーターで使用できます。

var map = L.map('map', {
    zoomSnap: 0.1
});

これにより、小さなパディング値を表示できますが、scrollWheelZoomの動作にも影響します。

0
meetar