공부67 [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 ··· 11 12 13 14 15 16 17 다음
