ตั้งค่าระดับการซูมแบบไดนามิกโดยยึดตามช่องว่าง

ฉันมีแผนที่แผ่นพับซึ่งขนาดขึ้นอยู่กับขนาดของหน้าต่างเบราว์เซอร์ ฉันต้องการให้ระดับการซูมได้รับการเลือกแบบไดนามิกเพื่อให้สามารถซูมได้มากที่สุดเท่าที่จะเป็นไปได้ในขณะที่แสดงขอบเขตทั้งหมด

ตอนนี้ฉันเพิ่งได้ระดับการซูมฮาร์ดโค้ดและจุดศูนย์กลางตามค่าเฉลี่ยของคะแนน

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

แต่ฉันต้องการให้มันเป็นกล่องที่มีขอบเขต (สองเกาะ) และให้ระดับการซูมที่เลือกตามขนาดของหน้าต่าง

คุณสามารถใช้:

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

map.fitBounds(group.getBounds());

ใช้คำตอบของ @ Farhatฉันคิดว่าสิ่งที่ฉันต้องการคือการส่งอาร์เรย์

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

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

นี่เป็นวิธีที่ฉันทำด้วย @Mike McKay! ;)

โปรดทราบว่าฉันได้เพิ่มสองสามพิเศษใน coords เป็น Padding ภายในดังนั้นเครื่องหมายไม่ถูกต้องด้านข้างของแผนที่ วิธีนี้ดูสวยงาม

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