Leaflet.js centra la mappa su un gruppo di marcatori

Question

im utilizzando Leaflet.js e vorrebbe un modo per centrare la mappa sui marcatori che ho, in modo che tutti siano all'interno della visualizzazione degli utenti all'avvio della pagina. Se tutti i marker sono raggruppati in una piccola area, vorrei che la mappa si riduca a un livello che li mostra tutti.

So che Google Maps ha una funzione di autocenter, ma come faccio a fare questo con Leaflet.js?

Answer 1

È possibile utilizzare L.LatLngBounds per creare un'area per lo zoom su.

Innanzitutto, creare un limite e passare un array di L.LatLngs:

var bounds = new L.LatLngBounds(arrayOfLatLngs); 

Questo creerà un limite che incapsulano ogni punto che è contenuto nella matrice. Una volta che avete i limiti, è possibile adattare i limiti della mappa per abbinare il vostro Creato legato:

map.fitBounds(bounds); 

Ciò ingrandire la mappa in quanto si può andare, pur contenente tutti i punti nella propria matrice.

In alternativa, è anche possibile chiamare il metodo fitBounds semplicemente chiamandolo e passando una serie di oggetti L.LatLng. Ad esempio:

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

Ciò funzionerà esattamente la stessa, senza la necessità di creare una specifica L.LatLngBounds oggetto.