Leaflet.js zentrieren Sie die Karte auf eine Gruppe von Markern

Question

ich leaflet.js und möchte eine Möglichkeit, die Karte auf den Markern zu zentrieren, die ich habe, so dass alle in der Benutzeransicht sind, wenn die Seite startet. Wenn alle Marker in einem kleinen Bereich gruppiert sind, möchte ich, dass die Karte auf ein Level herunterzoomt, das immer noch alle anzeigt.

Ich weiß Google Maps hat eine Autocenter-Funktion, aber wie würde ich mit Leaflet.js darüber gehen?

Answer 1

Sie können L.LatLngBounds verwenden, um einen Bereich zum Zoomen zu erstellen.

Zuerst wird eine Grenze erstellen und ein Array von L.LatLngs passieren:

var bounds = new L.LatLngBounds(arrayOfLatLngs); 

Dies wird eine Grenze schaffen, daß jeden Punkt einkapseln wird, die in der Anordnung enthalten ist. Sobald Sie die Grenzen haben, können Sie die Grenzen der Karte passen erstellten gebunden entsprechen:

map.fitBounds(bounds); 

Dies wird die Karte so weit vergrößern, wie es gehen kann, während immer noch jeden Punkt im Array enthält. Alternativ können Sie auch die fitBounds Methode aufrufen, indem Sie sie einfach aufrufen und ein Array von L.LatLng Objekten übergeben. Zum Beispiel:

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

Dies würde funktionieren genau das gleiche, ohne die Notwendigkeit, eine bestimmte L.LatLngBounds Objekt zu erstellen.