center - getlatlng - leaflet maps marker tutorial

Leaflet.js centra el mapa en un grupo de marcadores

Question

Estoy usando Leaflet.js y me gustaría centrar el mapa en los marcadores que tengo, para que todos estén dentro de la vista de los usuarios cuando se inicie la página. Si todos los marcadores están agrupados en un área pequeña, me gustaría que el mapa se reduzca a un nivel que aún los muestre a todos.

Sé que Google Maps tiene una función de autocentro, pero ¿cómo puedo hacer esto con Leaflet.js?

Answer 1

Puedes usar L.LatLngBounds para crear un área para hacer zoom.

Primero, cree un límite y pásele una matriz de L.LatLngs:

var bounds = new L.LatLngBounds(arrayOfLatLngs);

Esto creará unos límites que encapsularán todos los puntos que están contenidos en la matriz. Una vez que tenga los límites, puede ajustar los límites del mapa para que coincida con su límite creado:

 map.fitBounds(bounds);

Esto hará que el mapa se acerque todo lo que pueda, al tiempo que contiene todos los puntos de su matriz.

Alternativamente, también puede llamar al método fitBounds simplemente llamándolo y pasando una matriz de objetos L.LatLng . Por ejemplo:

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

Esto funcionaría exactamente igual, sin la necesidad de crear un objeto específico L.LatLngBounds .