Sınırlayıcı bir kutuya göre yakınlaştırma seviyesini dinamik olarak ayarlama

13

Boyutu tarayıcı penceresinin boyutuna bağlı bir broşür harita var. Sınırlama kutusunun tamamını gösterirken mümkün olduğunca yakınlaştırılması için yakınlaştırma düzeyinin dinamik olarak seçilmesini istiyorum.

Şu anda, zum seviyesi sabit kodlu ve orta nokta ortalama puanlara dayanıyor.

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

Bunun yerine, bir sınırlayıcı kutu (iki ada) vermek ve pencerenin boyutuna göre yakınlaştırma düzeyini seçmek istiyorum.

leaflet

— Mike McKay
kaynak

27

Sadece şunu kullanabilirsiniz:

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

map.fitBounds(group.getBounds());

— Farhat Abbas
kaynak

1

Manuel bir hesaplama ile merkezleme yapmadan önce, bu, merkezleme ve yakınlaştırma için daha iyi bir yol. FitBounds ihtiyacım olan cevaptı, ama ben fitBounds için iki koordinat geçmek ve yapılması gerektiğini anladım.

— Mike McKay

2

Önceden oluşturulmuş işaretçiler yoksa kesinlikle bir sonraki cevabı kullanın.

— Andy

12

@ Farhat'ın cevabını kullanarak , tüm ihtiyacım olan bir dizi diziyi geçmek olduğunu anladım:

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

— Mike McKay
kaynak

1

Bu, sonuna yakın bir sağ köşeli ayraç eksik. Düzenlememi neden geri aldığınızdan emin değilim.

— Jan Kyu Peblik

1

Köşeli ayraç konusunda haklısın - teşekkürler. Bunu düzeltirim. Düzenlemenizde ayrıca bir virgül daha vardı.

— Mike McKay

4

developer.mozilla.org/tr-TR/docs/Web/JavaScript/Reference/… Kod aslında sondaki virgülle de test edildi. (Çünkü yaşam biçimi anlamsızca farklı olan çizgilerle uğraşmak için çok kısa.)

— Jan Kyu Peblik

0

map.fitBounds() Google Harita Politikaları ile çalışıyorsanız da harika çalışır:

<!-- 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
kaynak

Bu cevap neden aşağı oylandı?

— LeeGee

0

@Mike McKay sayesinde bunu başardım! ;)

İç Dolgu olarak kordlara birkaç tane daha eklediğimi unutmayın, bu nedenle işaretçiler haritanın yan tarafında değildir. Bu şekilde daha güzel görünüyor.


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

map.fitBounds([ ...coordinates ])

VUE.JS YOLU:

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
kaynak