경계 상자를 기준으로 확대 / 축소 수준을 동적으로 설정

13

브라우저 창의 크기에 따라 크기가 다른 전단지 맵이 있습니다. 경계 상자 전체를 표시하면서 가능한 한 확대되도록 확대 / 축소 수준을 동적으로 선택하고 싶습니다.

지금은 줌 레벨을 하드 코딩하고 중심점을 평균 포인트를 기준으로했습니다.

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

대신 경계 상자 (두 개의 섬)를 제공하고 창 크기에 따라 확대 / 축소 수준을 선택하고 싶습니다.

leaflet

— 마이크 맥케이
소스

27

간단하게 사용할 수 있습니다 :

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

map.fitBounds(group.getBounds());

— 파 하트 압바스
소스

1

유용한 답변-수동으로 계산하기 전에 센터링 및 확대 / 축소를위한 더 나은 방법입니다. FitBounds는 내가 필요로하는 대답이지만, 단순히 두 좌표를 fitBounds에 전달하고 완료 할 수 있다고 생각했습니다.

— Mike McKay

2

마커가 생성되지 않은 경우 다음 답변을 반드시 사용하십시오.

— Andy

12

@ Farhat 's answer을 사용하여 필요한 배열 배열을 전달하는 것만 알았습니다.

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

— 마이크 맥케이
소스

1

이것은 분명히 끝 근처에 오른쪽 대괄호가 빠져 있습니다. 왜 내 편집을 되돌 렸는지 모르겠습니다.

— Jan Kyu Peblik

1

당신은 브래킷에 대해 옳습니다-감사합니다. 내가 고칠 게 그래도 편집 내용에 쉼표가 추가되었습니다.

— Mike McKay

4

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 코드는 실제로 후행 쉼표로 테스트되었습니다. (인생은 너무 짧아서 형식이 무의미하게 다른 선을 방해하지 않기 때문에)

— Jan Kyu Peblik

0

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

— 나만
소스

이 답변이 다운 투표 된 이유는 무엇입니까?

— LeeGee 2019

0

이것이 @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 ])

— 위기의 웹
소스