it-swarm.com.de

Leaflet.js zentriert die Karte auf einer Gruppe von Markern

Ich benutze Leaflet.js und möchten die Karte auf die Markierungen zentrieren, die ich habe, damit sich beim Start der Seite alle in der Ansicht des Benutzers befinden. Wenn sich alle Markierungen in einem kleinen Bereich befinden, möchte ich, dass die Karte auf eine Ebene verkleinert wird, in der immer noch alle Markierungen angezeigt werden.

Ich weiß, dass Google Maps eine Auto-Center-Funktion hat, aber wie würde ich mit Leaflet.js vorgehen?

42
lorless

Sie können L.LatLngBounds verwenden, um einen Bereich zu erstellen, auf den Sie zoomen möchten.

Erstellen Sie zunächst eine Grenze und übergeben Sie ihr ein Array von L.LatLngs:

var bounds = new L.LatLngBounds(arrayOfLatLngs);

Dadurch werden Begrenzungen erstellt, die jeden im Array enthaltenen Punkt einschließen. Sobald Sie die Grenzen festgelegt haben, können Sie die Grenzen der Karte an Ihre erstellte Grenze anpassen:

 map.fitBounds(bounds);

Dadurch wird die Karte so weit wie möglich vergrößert, wobei dennoch jeder Punkt in Ihrem Array enthalten ist.

Alternativ können Sie die fitBounds -Methode auch aufrufen, indem Sie sie einfach aufrufen und ein Array von L.LatLng - Objekten übergeben. Beispielsweise:

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

Dies würde genauso funktionieren, ohne ein bestimmtes L.LatLngBounds - Objekt erstellen zu müssen.

95
Patrick D