Tự động đặt mức thu phóng dựa trên hộp giới hạn

12

Tôi có một bản đồ tờ rơi có kích thước phụ thuộc vào kích thước của cửa sổ trình duyệt. Tôi muốn mức độ phóng to được chọn động để nó được phóng to nhất có thể trong khi hiển thị toàn bộ hộp giới hạn.

Ngay bây giờ, tôi chỉ có mức độ phóng to được mã hóa cứng và điểm trung tâm dựa trên mức trung bình của các điểm.

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

Thay vào đó, tôi muốn cho nó một hộp giới hạn (hai hòn đảo) và chọn mức thu phóng dựa trên kích thước của cửa sổ.

leaflet

— Mike McKay
nguồn

24

Bạn chỉ có thể sử dụng:

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

map.fitBounds(group.getBounds());

— Farhat Abbas
nguồn

1

Câu trả lời hữu ích - đó là một cách tốt hơn để định tâm và phóng to - trước khi tôi chỉ tập trung vào tính toán thủ công. FitBound là câu trả lời tôi cần, nhưng tôi nhận ra rằng bạn chỉ cần chuyển thành hai tọa độ để fitBound và được thực hiện.

— Mike McKay

2

Chắc chắn sử dụng câu trả lời tiếp theo trừ khi bạn đã có đánh dấu được tạo.

— Andy

11

Sử dụng câu trả lời của @ Farhat , tôi nhận ra rằng tất cả những gì tôi cần là vượt qua một mảng các mảng:

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

— Mike McKay
nguồn

1

Điều này rõ ràng là thiếu một khung vuông bên phải gần cuối. Không chắc chắn tại sao bạn hoàn nguyên chỉnh sửa của tôi.

— Jan Kyu Peblik

1

Bạn nói đúng về khung - cảm ơn. Tôi sẽ sửa nó. Chỉnh sửa của bạn cũng có một dấu phẩy thêm mặc dù.

— Mike McKay

4

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Mã Code thực sự đã được thử nghiệm với dấu phẩy. (Bởi vì cuộc sống quá ngắn để bận tâm với các dòng có sự khác biệt đáng kể về định dạng.)

— Jan Kyu Peblik

0

map.fitBounds() cũng hoạt động rất tốt nếu bạn đang làm việc với 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
nguồn

Tại sao câu trả lời này đã bỏ phiếu?

— LeeGee

0

Đây là cách tôi thực hiện nhờ @Mike McKay! ;)

Lưu ý rằng tôi đã thêm một vài bổ sung cho các hợp đồng dưới dạng Đệm bên trong, vì vậy các điểm đánh dấu không nằm ngay bên cạnh bản đồ. Cách này trông đẹp hơn.


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

map.fitBounds([ ...coordinates ])

VUE.JS CÁCH:

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
nguồn