Jump to content

지도의 padding과 margin


Recommended Posts

안녕하세요.

크게 두 세 가지 질문이 있습니다. 

Q1-1) 맵 생성시 옵션으로 부여하는 padding과, 생성한 맵을 fitBounds로 이동시킬 때 옵션으로 부여 가능한 margin은 어떻게 다른가요?

뷰포트 안쪽 여백과 좌표 경계 확장이 어떻게 다른지, 그리고 지도 생성시 bounds를 지정할 때 padding과 margin이 각각 어떻게 영향을 bounds에 미치는지 궁금합니다. 

Q1-2) 그리고 padding은 지정한 값이 바로 화면상의 px인데, 왜 margin은 부여한 값의 1/2 값으로 px을 지정하게 하셨는지 궁금합니다.

아래 사진 참고하시면,
padding은 '화면 픽셀'이라고 하셨는데,
margin은 'left 값이 10이면 왼쪽 여백이 5px 증가'라고 하셔서 질문드립니다. 

[사진] 좌: Map 생성시 option 중 하나 / 우: fitBounds의 options

image.png.a8b787a929117cd5a1b61c08e283590d.pngimage.png.0922d3ca72f46ff354f92e633014f489.png

 

 

 

 

Q2) 지도 생성시 option으로 bounds를 설정할 때 좌우에 여백을 두도록 설정하고 싶은데 작동하지 않습니다.

우선 아래 (좌측 사진)과 같이 objectList의 마커 객체를 포함하는 bounds 객체를 직접 생성하는 함수를 작성했습니다.
이렇게 되면, 가장 외부에 위치하는 마커들의 좌표가 bounds의 경계값에 포함되도록 bounds가 만들어진다고 이해했습니다. 아래 (우측 사진)처럼 말이죠.

[사진 좌측]  마커를 모두 포함하는 bounds 생성 함수 (마커가 경계에 위치하게 될 것이라고 예상) 
[사진 우측] 초록색 점: 마커 / 분홍색 라인: bounds를 이은 경계

image.png.18e49f18de1bd81267a7ee34feccdbd2.pngimage.png.7093d2efc45ce8ac87fd84947837eeb9.png

그리고 위의 사진에 있는 코드로 생성한 bounds를 맵 생성시 MapOptions의 bounds 옵션으로 적용하려고 합니다.
또한 지도 경계에 마커가 위치하는 것이 보기 별로라서, 마커가 어느 정도 지도 경계와 떨어지게 하기 위해 padding도 설정합니다. (아래 사진 참고)

image.png.d693a038bc3841db7c84e77c5a4452bc.png

제가 기대한 지도의 모습은 아래와 같습니다. 

image.png.d44d703f575a7fbd8774ad49ce393f2c.png

하지만
padding이 0,0,0,0(top,right,bottom,left)일 때(밑의 좌측 사진)
padding이 0,200,0,200일 때(밑의 우측 사진)의 결과가 모두 동일했습니다. (400이어도 변화가 없습니다.) 
(위 사진과 아래 사진의 차이점: 지도 좌우경계에 마커가 바로 위치함) 
(마커는 총 6개이며, 동일한 영역을 캡쳐했습니다. 그리고 isSearchBounds와 lastBounds가 모두 최신 값임을 확인했습니다.)

padding 0 0 0 0padding 0 200 0 200

맵 생성시 설정하게 되는 padding은 뷰포트의 여백이라는데, 왜 설정한 padding 사이에 bounds가 위치하지 않는건가요?

 

그래서 원하는 결과를 얻기 위해서 맵을 생성한 후에, 생성한 맵 객체의 fitBounds를 호출했습니다.
오직 좌표 경계 확장만을 위해 fitBounds로 변화 없는 bounds를 다시 설정하는 것이 비효율적인 것 같아 찜찜하지만, 
fitBounds 함수의 FitBoundsOptions(margin 설정)를 사용하니까 아래와 같이 의도한 바가 적용되었습니다(우측사진).
[사진] 좌: 200로 적용함 / 우: 201으로 적용함

그래서 Q1-1 질문처럼 padding과 margin이 어떻게 다르게 적용되기에 이런 결과가 나오는지 궁금합니다. 

다만 fitBounds 사용에도 의문이 있긴 했습니다. 
좌측 사진처럼 200으로 설정할 때는 적용이 안 되다가, 우측 201이상부터 갑자기 적용이 되더라구요.
왜 그런건가요? (대략 
200.7324의 어딘가의 값을 기준으로 바뀝니다.)

image.png.ab64ff18445fe6cccbb66b9e9b7cfcfe.pngimage.png.332481b8df953e545578bdf07d4404b8.png

** 궁극적인 목표 **
저는 직접 생성한 bounds 객체를 지도 생성시에 적용하는데, 이때 bounds 주변으로 여백을 주고 싶습니다.
초록색으로 표시한 여백이 유지된채로, 
bounds가 어떻게 생겼든 빨간 영역 안으로 bounds가 위치하도록 하고싶습니다..
image.png.96f78c7892f73d66fbb7670410f0cf24.png

링크 복사
다른 사이트에 공유하기

게시글 및 댓글을 작성하려면 로그인 해주세요.



로그인
×
×
  • Create New...