Dynamicznie ustawiaj poziom powiększenia na podstawie obwiedni

13

Mam mapę ulotki, której rozmiar zależy od wielkości okna przeglądarki. Chciałbym, aby poziom powiększenia był dynamicznie wybierany, aby był możliwie jak najbardziej powiększony, jednocześnie pokazując całość ramki ograniczającej.

W tej chwili mam zakodowany na stałe poziom powiększenia i punkt środkowy oparty na średniej liczby punktów.

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

Zamiast tego chciałbym nadać mu ramkę ograniczającą (dwie wyspy) i wybrać poziom powiększenia w zależności od wielkości okna.

leaflet

— Mike McKay
źródło

27

Możesz po prostu użyć:

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

map.fitBounds(group.getBounds());

— Farhat Abbas
źródło

1

Przydatna odpowiedź - to lepszy sposób na centrowanie i powiększanie - zanim po prostu wyśrodkowałam ręcznie. FitBounds była odpowiedzią, której potrzebuję, ale doszedłem do wniosku, że możesz po prostu podać dwie współrzędne, aby dopasować FitBounds i gotowe.

— Mike McKay,

2

Zdecydowanie użyj następnej odpowiedzi, chyba że masz już utworzone znaczniki.

— Andy,

12

Korzystając z odpowiedzi @ Farhata , zorientowałem się, że wystarczyło mi przekazać tablicę:

map.fitBounds([
  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
])

— Mike McKay
źródło

1

To oczywiście brakuje prawego nawiasu kwadratowego na końcu. Nie jestem pewien, dlaczego cofnąłeś moją edycję.

— Jan Kyu Peblik

1

Masz rację co do wspornika - dzięki. Naprawię to. Twoja edycja zawierała jednak dodatkowy przecinek.

— Mike McKay

4

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Kod faktycznie testowany również z przecinkiem końcowym. (Ponieważ życie jest zbyt krótkie, aby zawracać sobie

— głowę

0

map.fitBounds() działa również świetnie, jeśli pracujesz z poliliniami map Google:

<!-- 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
źródło

Dlaczego głosowano za odrzuceniem tej odpowiedzi?

— LeeGee,

0

Tak właśnie zrobiłem dzięki @Mike McKay! ;)

Zauważ, że dodałem kilka dodatkowych do strun jako wewnętrzne wypełnienie, więc znaczniki nie znajdują się z boku mapy. W ten sposób wygląda piękniej.


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

map.fitBounds([ ...coordinates ])

VUE.JS SPOSÓB:

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
źródło