web-dev-qa-db-fra.com

Leaflet.js fitBounds avec rembourrage?

J'essaie de définir l'option fitBounds dans une carte de brochure comme celle-ci:

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] });

Cependant, cela ne semble pas ajouter de rembourrage? au moins, le "niveau de zoom" de la carte ne change pas, et il affiche toujours les deux points sur les bords (c'est-à-dire que l'un est en haut à droite et l'autre en bas à gauche). Pour certains ensembles de marqueurs, cela fonctionne bien, le zoom est à un niveau décent et vous pouvez tout voir bien. Cependant, lorsque les éléments sont assez proches les uns des autres, il semble qu'ils zooment un peu trop, sauf si je peux les ajuster avec du "rembourrage".

De plus, je ne sais pas si les limites seraient correctes comme ça? Dois-je utiliser à la place juste:

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: []}) devrait fonctionner. Je vous suggère de changer le rembourrage par exemple. [50, 50], vos valeurs de remplissage sont peut-être trop petites.

Découvrez ceci exemple JSFiddle .

51
yarl

J'ai rencontré ce problème. Si je comprends bien, le rembourrage est contrôlé par le zoom. Dans mon exemple, tous les paramètres de remplissage inférieurs à 10 ne font aucune différence. Dès que le remplissage passe à 10, la carte fait un zoom arrière d'un niveau et il y a un remplissage. De plus, l'augmentation de la valeur de remplissage n'a aucune influence, jusqu'à ce qu'elle soit si grande qu'un autre niveau de zoom arrière soit atteint.

7
T.G. Dallas

FWI, vous pouvez également définir un niveau de zoom maximal sur la carte comme suit:

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

de cette façon, vous pouvez éviter que la carte ne zoome trop au cas où les marqueurs seraient trop proches.

2
Joe Black

Le dépliant ne fait que zoomer entre les niveaux de zoom à valeur entière par défaut. Après la version 1.0.0, les "zooms fractionnels" sont disponibles avec le paramètre "zoomSnap":

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

Cela permettra à des valeurs de remplissage plus petites d'être visibles, mais affectera également le comportement de scrollWheelZoom.

0
meetar