एक बाउंडिंग बॉक्स के आधार पर डायनामिक रूप से ज़ूम स्तर सेट करें

Question

मेरे पास एक लीफलेट मैप है जिसका आकार ब्राउज़र विंडो के आकार पर निर्भर करता है। मैं जूम स्तर को डायनामिक रूप से चुनना चाहूंगा ताकि यह बाउंडिंग बॉक्स की संपूर्णता को दिखाते हुए जितना संभव हो उतना ज़ूम किया जा सके।

अभी, मेरे पास औसत स्तर के आधार पर ज़ूम स्तर हार्डकोड और केंद्र बिंदु है।

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

इसके बजाय, मैं इसे एक बाउंडिंग बॉक्स (दो द्वीप) देना चाहूंगा और विंडो के आकार के आधार पर ज़ूम स्तर चुना जाएगा।

Answer 1

आप बस उपयोग कर सकते हैं:

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

map.fitBounds(group.getBounds());

Comments

उपयोगी उत्तर - वह केंद्र और ज़ूम करने के लिए एक बेहतर तरीका है - इससे पहले कि मैं सिर्फ एक मैनुअल गणना के साथ केंद्रित कर रहा था। FitBounds मैं जवाब की जरूरत थी, लेकिन मुझे लगा कि आप बस दो निर्देशांक में पारित कर सकते हैं fitBounds और किया जा सकता है।

— माइक मैकाय

निश्चित रूप से अगले उत्तर का उपयोग करें जब तक कि आपके पास पहले से ही निर्मित मार्कर नहीं हैं।

— एंडी

Answer 2

@ फरहत के जवाब का उपयोग करते हुए , मुझे पता चला कि मुझे जो कुछ भी चाहिए वह सरणियों का एक सरणी पास करना था:

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

Comments

यह स्पष्ट रूप से अंत के पास एक सही वर्ग ब्रैकेट गायब है। यकीन नहीं होता कि आपने मेरा संपादन क्यों वापस किया।

— Jan Kyu Peblik

आप ब्रैकेट के बारे में सही हैं - धन्यवाद। मैं ठीक कर दूँगा। हालांकि आपके संपादन में एक अतिरिक्त अल्पविराम भी था।

— माइक मैकाय

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… कोड वास्तव में अल्पविराम अल्पविराम के साथ परीक्षण किया गया है। (क्योंकि जीवन बहुत कम है कि लाइनों के साथ परेशान करने के लिए जो वास्तव में काफी भिन्न स्वरूप में हैं।)

— जन क्यु पेबलिक

Answer 3

map.fitBounds() यदि आप 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);

Comments

क्यों इस जवाब को वोट दिया गया था?

— लीगी

Answer 4

इस तरह से मैंने @Mike McKay को धन्यवाद दिया! ;)

ध्यान दें कि मैंने एक जोड़े को आंतरिक गद्दी के रूप में अतिरिक्त जोड़े हैं, इसलिए मार्कर मानचित्र के पक्ष में सही नहीं हैं। इस तरह से सुंदर दिखता है।

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

map.fitBounds([ ...coordinates ])

VUE.JS रास्ता:

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