Atur tingkat zoom secara dinamis berdasarkan kotak pembatas

12

Saya memiliki peta selebaran yang ukurannya tergantung pada ukuran jendela browser. Saya ingin tingkat zoom dipilih secara dinamis sehingga diperbesar mungkin sambil menunjukkan keseluruhan kotak pembatas.

Saat ini, saya hanya memiliki tingkat pembesaran hardcode dan titik pusat berdasarkan rata-rata poin.

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

Sebagai gantinya, saya ingin memberikan kotak pembatas (dua pulau) dan memilih tingkat pembesaran berdasarkan ukuran jendela.

leaflet

— Mike McKay
sumber

25

Anda cukup menggunakan:

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

map.fitBounds(group.getBounds());

— Farhat Abbas
sumber

1

Jawaban yang berguna - itu adalah cara yang lebih baik untuk pemusatan dan pembesaran - sebelum saya hanya memusatkan dengan perhitungan manual. FitBounds adalah jawaban yang saya butuhkan, tetapi saya tahu Anda hanya bisa melewati dua koordinat untuk fitBounds dan dilakukan.

— Mike McKay

2

Pasti gunakan jawaban berikutnya kecuali Anda sudah membuat spidol.

— Andy

11

Dengan menggunakan jawaban Farhat , saya menemukan bahwa yang saya butuhkan hanyalah melewatkan array array:

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

— Mike McKay
sumber

1

Ini jelas kehilangan braket persegi kanan di dekat ujungnya. Tidak yakin mengapa Anda mengembalikan suntingan saya.

— Jan Kyu Peblik

1

Anda benar tentang braket - terima kasih. Saya akan memperbaikinya. Hasil edit Anda juga memiliki koma ekstra.

— Mike McKay

4

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Kode sebenarnya juga diuji dengan trailing koma. (Karena hidup ini terlalu pendek untuk diganggu dengan garis-garis yang secara signifikan berbeda dalam format.)

— Jan Kyu Peblik

0

map.fitBounds() juga berfungsi dengan baik jika Anda bekerja dengan 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
sumber

Mengapa jawaban ini tidak dipilih?

— LeeGee

0

Ini adalah bagaimana saya membuatnya berkat @ Mike McKay! ;)

Perhatikan bahwa saya telah menambahkan beberapa ekstra ke coords sebagai Padding bagian dalam, jadi markernya tidak tepat di sisi peta. Dengan cara ini terlihat lebih cantik.


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

map.fitBounds([ ...coordinates ])

VUE.JS CARA:

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
sumber