공부/naver map api13 [naver map api 예제] 소개 이전에 작성했었던 naver map api를 사용해서 구현했던 시스템에 대한 메뉴얼을 요구해서 나름 메뉴얼 형식으로 정리해서 업로드했었는데, 그 내용이 조금 변했다. 그래서 내용 수정을 하려고 했는데 내가 이미 구청 인턴이 끝나서 구청에서 받았던 데이터를 사용하면 안 되기도 하고, 애초에 이미 포맷해서 내 컴퓨터에 파일 자체가 없다. 그러면 내가 예제 파일을 새로 만들어야 하는데, 그렇게 하면 그냥 새로운 글이 되는거잖아? 그런 이유로, 이번에는 내가 naver map api를 사용해서 구현했던 기능들에 대해 자세히 작성해보려고 한다. 이런 것까지 적는다고? 싶을 정도로 자세하게 참고용으로 기록할 예정! (내 기준으로) naver map api를 사용하기 위한 기본적인 세팅 가이드는 여기를 참고하자. h.. 2022. 3. 4. [naver map api] 정리 이전 글에서 주소 검색 이벤트 함수를 작성하는 방법을 알아보았다. 마지막으로 코드에 전반에 대한 아키텍처를 설명하고 글을 마친다. 전체적인 구조는 다음과 같다. 웹페이지를 열자마자 실행될 작업들이다. 대기상태에서 발생하는 이벤트 리스트들이다. 이동버튼을 눌렀을 때 프로세스는 다음과 같다. 초기화 버튼 눌렀을 때 프로세스는 다음과 같다. 주소를 검색했을 때 맞는 주소인지 틀린 주소인지 검사해서 확인 문장을 출력하도록 했다. 검색한 주소가 정상일경우 실행할 프로세스는 다음과 같다. 마우스를 움직이는 이벤트에 대한 구현 내용은 다음과 같다. 마우스 클릭 이벤트에 대한 구현 내용은 다음과 같다. 마우스 더블클릭 이벤트에 대한 구현 내용은 다음과 같다. 마우스 오른쪽 클릭 이벤트에 대한 구현 내용은 다음과 같다... 2022. 1. 27. [naver map api] 주소검색 기능 구현 이전 글에서 버튼을 클릭했을 때 발생할 이벤트 함수를 작성하는 방법을 알아보았다. 이어서 naver geocoding과 naver reverse geocoding을 사용해서 주소 검색하는 방법에 대해 알아본다. 주소를 검색하는 방법을 두 가지 구현했다. 첫 번째는 주소 검색 텍스트박스에 주소를 입력하고 엔터를 누르거나 검색 버튼을 클릭해서 주소를 출력하는 방법이고, 두 번째는 마우스를 클릭했을 때 좌표에 해당하는 주소를 출력하는 방법이다. 먼저 텍스트박스에 주소를 입력해서 검색하면 searchAddress() 함수를 호출한다. /* 검색 버튼이 눌리거나 또는 검색창에서 엔터를 누르면 searchAddress() 함수 호출 */ document.getElementById("searchBtn").onclic.. 2022. 1. 27. [naver map api] 버튼 이벤트, 모달창 생성 이전 글에서 이미지, 버튼, 텍스트박스 등을 만드는 법에 대해 알아보았다. 이번 글에서는 버튼을 클릭했을 때 발생할 이벤트 함수를 작성하는 방법에 대해 알아본다. 버튼을 클릭했을 때 발생하는 이벤트는 크게 세가지가 있다. 첫번째는 버튼을 클릭했을 때, 해당 위치로 이동하면서 레이어를 추가로 그려주는 이벤트이고 두번째는 버튼을 클릭했을 때 모달 창을 출력해주는 이벤트이며, 세번째는 버튼을 클릭했을 때 주소가 입력된 텍스트박스의 값이 있으면 해당 주소로 이동하는 이벤트이다. 리모콘 중단의 검색 버튼과 하단의 행정동 버튼들에 대한 이벤트를 작성한다. 어차피 비슷한 기능들이다. 우선 모달 창을 출력하는 버튼 이벤트부터 작성한다. /* 요구사항 팝업 이벤트 */ window.onload = function() {.. 2022. 1. 27. 이전 1 2 3 4 다음
