Leaflet.js центрирует карту на группе маркеров

Я использую Leaflet.js и хотел бы каким-то образом центрировать карту на имеющихся у меня маркерах, чтобы все они были в пределах видимости пользователя при запуске страницы. Если все маркеры сгруппированы в небольшой области, я бы хотел, чтобы карта уменьшила изображение до уровня, который по-прежнему отображает все из них.

Я знаю, что в Google Maps есть функция автоцентра, но как мне поступить с Leaflet.js?

Ответы

Ответ 1

Вы можете использовать L.LatLngBounds, чтобы создать область для увеличения.

Сначала создайте границы и передайте им массив L.LatLngs:

var bounds = new L.LatLngBounds(arrayOfLatLngs);

Это создаст границы, которые будут инкапсулировать каждую точку, содержащуюся в массиве. Как только у вас есть границы, вы можете поместить границы карты в соответствие с созданной границей:

 map.fitBounds(bounds);

Это позволит масштабировать карту, насколько это возможно, и все же содержать каждую точку в вашем массиве.

В качестве альтернативы вы также можете вызвать метод fitBounds, просто вызвав его и передав в массив объектов L.LatLng. Например:

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

Это будет работать точно так же, без необходимости создавать определенный объект L.LatLngBounds.