내일배움캠프 D+16

유제협·2021년 9월 30일
0

TeamProject

전날 infowindow, 지도 화면 이동 부분이 어색해 수정을 하였다.

1) infowindow

infowindow(마커에 표시되는 정보 창)에 들어있는 내용의 양이 많아지면 상자 밖으로 삐져나가는 상황이 발생하였다. 이에 자동으로 내용의 길이에 맞게 크기를 변환해 주는 방법일 거 같은 코드로 width=auto;, max-width:200px;등등 작성해 보았지만 문제가 해결되지 않았고 검색해 본 결과 infowindow에서 자체적으로 크기를 조절해 주는데 이 부분에서 자꾸 내용이 나가게 되면 직접 크기를 지정해 줘야 한다는 것이다. 그래서 결국 infowindow 속성에 id 값을 주고 css에서 width, height 값을 지정해 줬다.(마음에 들지 않았다.....)

2) 화면이동

검색 결과 메뉴에서 해당 위치에 마우스를 올리면(mouseover) 지도에 위치가 보이고 정보 창이 나와야 하는 동작인데 x좌표로는 지도가 해당 위치까지 이동해 주는데 y좌표로는 이동하지 않는 것이었다. 그래서 일단 x좌표 이동은 살려두고 y좌표에 대한 해결로 일단 선택 위치가 보이는 지도 밖에 위치할 경우 좌표값을 활용해 map 중앙값을 해당 좌표로 바꿔주어 표현하였다.

3) Merge

지도 검색, 검색 목록 출력, infowindow, 해당 위치의 정보(지역 이름, 주소) 가져오기의 기능을 완성한 후 팀원이 작성한 디자인 파일과 병합하였다. 기능을 구현해 둔 것이어서 디자인에 적용하는 건 큰 어려움이 없었다. 다만 시각적으로 보이는 부분은 어느 정도 수정이 필요했다.

(한 줄 느낀 점) -수정하는 과정에서 사소하게 많이 배우는 것 같다.-

0개의 댓글