Динамічно встановити рівень масштабування на основі обмежувального поля

13

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

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

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

Натомість я хотів би дати йому обмежувальне поле (два острови) і вибрати рівень масштабування залежно від розміру вікна.

leaflet

— Майк Маккей
джерело

27

Ви можете просто використовувати:

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

map.fitBounds(group.getBounds());

— Фархат Аббас
джерело

1

Корисна відповідь - це кращий спосіб центрування та масштабування - до того, як я лише центрирував ручний розрахунок. FitBounds - це відповідь, що мені потрібна, але я зрозумів, що ти можеш просто перейти на дві координати, щоб підходити доBounds і робити це.

— Майк Маккей

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);

— Naaman
джерело

Чому ця відповідь була заперечена?

— 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
джерело