전체 글116 [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. [naver map api] 리모콘 생성(버튼, 텍스트박스, 이미지 올리기) 이전 글에서 naver map api 위에 레이어를 그리는 방법에 대해 알아보았다. 이번 글에서는 주소를 검색하는 방법에 대해 작성하려고 했는데 우선 버튼을 만드는 것부터 해야하니까 이번에는 버튼과 텍스트박스 등을 만드는 방법과 버튼 이벤트를 작성하는 방법에 대해 알아본다. 먼저 index.html를 다시 작성한다. body부분에 naver map을 설정하고 그 아래 리모콘 영역을 그릴 menu_wrap을 만든다. 리모콘 영역 상단에 이미지를 삽입하고, 모달 창을 생성할 버튼을 만든다. 리모콘 영역 중단에 주소 검색 버튼과 주소 텍스트박스를 만든다. 추가로 주소가 맞는지 틀린지 출력하기 위해 알림 텍스트 영역도 만들었다. ... 주소를 검색하세요! 리모콘 하단 영역에는 초기화 버튼과 각 행정동 별 이동 .. 2022. 1. 27. [naver map api] naver map 위에 레이어 그리고 마우스 리스너 설정하기 이전 글에서 naver map api를 사용하기 위한 기본적인 작업을 진행했다. 이제부터는 내가 구현했던 함수들을 소개하려고 하는데, 이미 구현되어 있는 코드를 가지고 설명하려다 보니 처음부터 차근차근 진행하지 못하는 부분이 있다. 따라서 글에서 설명하지 않은 코드가 함수에 포함되어 있을 가능성이 높기 때문에 감안해서 글을 읽기를 권장한다. 이번에는 naver map 위에 레이어를 그리는 방법에 대해 작성한다. 레이어를 그리는 것은 polygon 대신 geojson file을 이용할 것이기 때문에 geojson file이 필요한데, 이전 글에서도 작성했지만 나 같은 경우는 QGIS를 이용해서 shp file을 geojson file로 변환시켰다. geojson으로 레이어를 그리는 이유는 여러 이유가 있지.. 2022. 1. 26. [naver map api] naver map 그리기 이전 글에서 카카오 지도 api 라이선스 발급과 플랫폼 등록하는 법을 알아보았다. 이번에는 코드를 설명하기 앞서 만들려는 프로그램에 대한 설명을 작성한다. 추가로 visual studio code와 Apache http server 사용법을 모르는 사람은 이전에 작성해뒀던 카카오 지도 api에 대한 글이지만 설치 과정은 완전히 동일하니 https://1545154.tistory.com/6 와 https://1545154.tistory.com/7 를 참고하면 된다. 만들려는 프로그램은 통지도 시스템이다. 구청에서 인턴을 하면서 행정동별 통 구역을 나누는 작업을 했었는데, 그 파일들을 가지고 웹페이지를 하나 만들려고 한다. 일단 구현하려고 하는 큰 그림은 다음과 같다. 프로그램이 실행되면 처음에 진행될 작업.. 2022. 1. 26. 이전 1 ··· 13 14 15 16 17 18 19 20 다음
