TeamProject
기능 구현을 위해 간단히 html,css,js를 작업 하였는데 고려 할 것이 있어서 계획보다 시간이 많이 걸렸다.
좌표 이미지 등록 html,css,js
동작
지도에 마우스 우클릭을 하면 해당 위치에 마커와 info창을 띄우고 해당 좌표를 가져오고, info창의 버튼을 클릭하면 우측에 업로드에 필요한 정보를 띄워준다.
작성 과정
1) 원하는 위치를 클릭하면 좌표값을 가져온다.
- 좌클릭 시 좌표값을 가져오는 것은 구현하였으나, 마우스 우클릭은 방법을 찾다가 잘 모르겠어서 일단 좌클릭으로 작업을 마쳤다.
2) 클릭 위치에 마커를 표시
- 마커를 띄우는 부분에서 위치(좌표값), 마커 이미지, 크기 등 고려할 것이 많았다. 그리고 마커를 따로 지워주지 않으면 이전 마커들이 계속 남아 있었다. 그래서 마커를 찍어주기 전에 지워주면 되지않나 생각했지만 아에 마커가 찍히지 않았다. 그래서 일단 찍힌 마커들을 리스트에 넣고 따로 함수를 만들어서 지워주니 해결 되었다.
3) 정보창(사진 업로드 버튼) 띄워주기
- 원래는 클릭 위치의 좌표값을 바로 받아와서 그 위치에 정보창을 띄워주려 했지만 infowindow를 띄워주기 위해서는 마커값이 필요했고 2)번에서 표시한 마커를 기준으로 띄워주게 되었다.
4) 사진업로드 버튼 > 업로드에 필요한 정보창 띄우기(우측)
- 사진 업로드 버튼의 함수를 통해 기존 우측 정보들을 hide 시켜주고 내가 미리 작성해둔 html을 show시켜줬다. 이 작업에서는 우측 정보창에서 사진 업로드를 위해 구역을 미리 grid로 나눠주는데 업로드 할 사진들을 띄워주는 부분은 3장으로 한정 되어 있어서 나누기 쉬웠지만 이전에 업로드한 사진들을 보여주는 부분은 나눠둔 구역보다 넘치면 지정된 크기와 다르게 구역이 생성 되는 오류가 발생하였다. 이부분은 일단 업로드 기능을 완성시키고 수정 해야 겠다.
-오늘 작성해둔 뼈대에 내일 기능을 구현하는게 기대된다.-
