[Google I/O GDG] 웹 4 - 위치 및 지리 정보의 모든것

 

지도

각종 오버레이 

두개의 지검의 길이,  반경을 보고 겹치는 부분을 확인

클러스트링 기능

-행정 구역 별로 

- 마커 클러스터링 (z 축 떄문에)

 

마커 오버해드 최적화

(2~300 개 부터)

 

네이버 지도는 제이쿼리가 필요

 

언어

gedjson 위치와 관련된 json

좌표계 - 기하학의 표현방식

행정구역 코드 - 행안부에서 만든 지역별 코드 - 시 군 구 까지 

돔 - html에 접근하기 위해 필요

sdk  - 소프트웨어 개발 도구 네이버 지도 sdk 

레이어 - 지도 유형 

데이터 레이어 - 공간 데이터를 기반으로 지오제이슨 데이터를 보여쥼

지도 컨트롤 - 사용자가 지도와 상호작용 할 수 있도록 제공 (특정 위치에 고정)

오버레이 - 지도위에 있는 그래픽 요소들 (특정 경도 위도에 지정)

클러스터 - 여러 개채를 묶어서 보여주는 방식 (한건물에)

이벤트 - 지도와의 상화 작용 

 

 

참고 사이트 

부동산 관련 사이트

리치코 호갱 노노 

네이버 지도문서

지도 서비스 웹 

 

 

 

 

네이버 지도 sdk 의 특징 

문서화가 잘 되어있는 편에 속한다 

타입스크립트 지원(별도 설정 필요)

예제가 많이 있다

제이 쿼리를 사용 

spa사용시 고려가 필요 

 

 

 

기본

간단한 도형및 선 띠우기 

마커 및 인포윈도우 띄우기

지도 내 가장자리 부분에 커스텀 버튼 

 

 

따로 구현 필요 

행정 구역별 표시 

커스텀 오버레이

마커 자동 클러스터링 

행정구역별 마커 클러스터링 

 

 

 

 

지도 서비스 웹 사이트를 통해 행정 구역별 지리정보 데이터를 얻을 수 있다 

 

 

지도에서의 작업 

마커 만들기 

 

 

 

 

top left left top 우선순위가 다르다  로고 위치량 겹치면 이상함 

 

 

 

 

 

확대 축소에 따른 거리는 데스티네이션 포인트 사용해야함 

 

 

 

각도 구할려면 코사인 메서드로 각도 만들어야함

 

 

 

 

마커를 넣을때 상태 랜더링에 대한 고력 필요 

줌 아웃 되었을때 다 보여주는것이 아닌 지역별 몇개, 이런식으로 보여주는 식으로

 

 

 

행정 구역의 중심지 = 시청과 구청을 기준으로 

 

마커를 클릭하면 중심 지역으로 이동하는 기능

 

 

줌인 줌아웃시 랜더링 문제를 해결하기 위해 css 변수를 만들고 그거에 따라 값을 매핑 

 

 

 

 

마커 로드 최적화 

화면을 옴길시 마커가 같이 움직여야함

 

마커수 pc 500 모바일 200 

 

 

 

비포 

위도 경도에 해당하는 마커만 그려줌 

api 응답에 한계가 있음

상황 핸들링 필요

조금만 이동시 깜빡이는 것처럼 보임 

 

모든마터 > 랜더링 문제 
행정구역 단위로 > 수도권??? 

 

 

 

조건에 맞게 위치에 상관업이 api로 가져옴

(그리지는 않음)

 

 

이전 위치에서 보여지지만 현재 위치에서 보여지지 않음 

..

....

 

겹치는 영역에 있는 애들은 나두고 새로운 애들만 새로 그리는 로직을 생성 

시설의 위도 경도로 프론트 내부적으로 계산을 함 

 

 

 

api 로 전국에 있는 시설을 가져오고,

검색 조건이 바뀔때는 api를 새로 받아온다