Динамически установить уровень масштабирования на основе ограничительной рамки

13

У меня есть листовка с картой, размер которой зависит от размера окна браузера. Я бы хотел, чтобы уровень масштабирования был выбран динамически, чтобы он был максимально увеличен при отображении всей ограничительной рамки.

Прямо сейчас у меня просто жестко задан уровень масштабирования и центральная точка на основе среднего значения точек. 

map = new L.Map('map', {
  center: new L.LatLng(
    latitudeSum/locations.length,
    longitudeSum/locations.length
  )
  zoom: 9
})

Вместо этого я хотел бы дать ему ограничивающую рамку (два острова) и выбрать уровень масштабирования в зависимости от размера окна.

leaflet Майк Маккей
источник

Ответы:

26

Вы можете просто использовать:

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());
Фархат Аббас
источник
1
Полезный ответ - это лучший способ для центрирования и масштабирования - прежде чем я просто центрировался с помощью ручного вычисления. FitBounds был ответом, который мне нужен, но я понял, что вы можете просто перейти к двум координатам, чтобы соответствовать FitBounds, и все будет готово.
Майк Маккей
2
Обязательно используйте следующий ответ, если у вас уже нет созданных маркеров.
Энди
12

Используя ответ @ Farhat , я понял, что все, что мне нужно, это передать массив массивов:

map.fitBounds([
  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
])
Майк Маккей
источник
1
Это явно отсутствует правая квадратная скобка в конце. Не уверен, почему ты отменил мою правку.
Ян Кью Пеблик,
1
Вы правы насчет кронштейна - спасибо. Я исправлю это. Ваше редактирование также имеет дополнительную запятую.
Майк Маккей
4
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Код, фактически протестированный с запятой также. (Потому что жизнь слишком коротка, чтобы беспокоиться о строках, которые бессмысленно существенно различаются по формату.)
Ян Кью Пеблик
0

map.fitBounds() также отлично работает, если вы работаете с Google Map Polylines:

<!-- required for Leaflet Polyline support -->
<script type="text/javascript" src="https://cdn.rawgit.com/jieter/Leaflet.encoded/68e78190/Polyline.encoded.js"
crossorigin=""></script>

// polylines require backslashes to be escaped (Jinja example)
let encodedRoute = '{{ activity.strava_data['map']['polyline']|replace("\\", "\\\\")|safe }}';
let coordinates = L.Polyline.fromEncoded(encodedRoute).getLatLngs();
let map = L.map('map').fitBounds(coordinates);
Нееман
источник
Почему этот ответ был отклонен?
LeeGee
0

Вот как я сделал это благодаря @Mike McKay! ;)

Обратите внимание, что я добавил пару дополнительных элементов к координатам в качестве внутреннего отступа, поэтому маркеры расположены не по бокам карты. Этот способ выглядит красивее.


const [ ...coordinates ] = locations.map(marker => [ marker.coordinates.latitude + 
0.055, marker.coordinates.longitude + 0.055 ])

map.fitBounds([ ...coordinates ])

VUE.JS WAY: 

mounted () {
   this.$nextTick(() => {
        this.initialZoom()
   })
}


methods: {
   initialZoom () {
       const map = this.$refs.myMap.mapObject
       const [ ...coordinates ] = this.locations.map(marker => [                                  
                                          marker.coordinates.latitude + 0.055,
                                          marker.coordinates.longitude + 0.055 
                                   ]) 

map.fitBounds([ ...coordinates ])
Despertaweb
источник