web-dev-qa-db-fra.com

Leaflet.js centre la carte sur un groupe de marqueurs

J'utilise Leaflet.js et j'aimerais pouvoir centrer la carte sur les marqueurs que j'ai afin que tous soient à la vue de l'utilisateur au lancement de la page. Si tous les marqueurs sont regroupés dans une petite zone, je voudrais que la carte zoome vers le bas à un niveau qui les affiche toujours tous.

Je sais que google maps a une fonction de centrage automatique, mais comment pourrais-je procéder avec Leaflet.js?

42
lorless

Vous pouvez utiliser L.LatLngBounds afin de créer une zone de zoom.

Tout d'abord, créez une limite et passez-lui un tableau de L.LatLngs:

var bounds = new L.LatLngBounds(arrayOfLatLngs);

Cela créera des limites qui encapsuleront chaque point contenu dans le tableau. Une fois que vous avez les limites, vous pouvez ajuster les limites de la carte pour correspondre à votre limite créée:

 map.fitBounds(bounds);

Cela zoomera la carte aussi loin que possible, tout en contenant chaque point de votre tableau.

Alternativement, vous pouvez également appeler la méthode fitBounds en l'appelant simplement et en passant un tableau de L.LatLng objets. Par exemple:

map.fitBounds([[1,1],[2,2],[3,3]]);

Cela fonctionnerait exactement de la même manière, sans avoir besoin de créer un L.LatLngBounds objet.

95
Patrick D