IT/JAVASCRIPT14 자바스크립트로 카카오맵 기반 마스크맵 만들기 6단계 지도의 중앙값을 기준으로 지도가 동적으로 변경되도록 수정하려 합니다. 동적으로 바꾸기 위해 사용할 것은 'idle' 2020. 6. 17. 자바스크립트로 카카오맵 기반 마스크맵 만들기 5단계 이번 포스팅에선 카카오지도만 있는 웹페이지에 실제 정부에서 관리하고있는 마스크 수량 보유 약국 데이터 들을 어떻게 받아 오는지, 그 받아온 데이터를 어떻게 가공해서 마커를 찍어내는지 알아볼 차례입니다. 처음이라 정적데이터를 가지고 만들어보겠습니다. ( 고정된 값 ) 추후 동적으로 데이터 변경해서 마커 생성 ( 지도의 중앙값 위치에 따라 데이터가 바뀜 ) 공적데이터포털 이라고 검색하고 https://www.data.go.kr/ 에 들어가게 되면 검색창이 하나 나오는데 마스크 검색 후 오픈 API 를 찾게 되면 다음과 같이 나옵니다. 우리는 지도상에 좌표(위/경도)를 통해 마커를 찍을거라 빨간색 박스 안의 서비스를 클릭 합니다. 위 사진의 URL 주소를 잘 복사 해두십시오. 저 URL 주소를 직접 클릭해보면.. 2020. 6. 15. 자바스크립트로 카카오맵 기반 마스크맵 만들기 4단계 이번에는 상단바 밑에 카카오맵을 적용 시키는 단계. 우선 https://developers.kakao.com/ 들어가서 내어플리케이션을 추가 합니다 . 추가한 어플리케이션에는 REST API 키가 적혀있을건데 이걸 켜둡시다. 다음으론 https://apis.map.kakao.com/web/sample/basicMap/ 에 있는 Javascript + HTML 탭 내용을 복사한다. var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; // 지도를 표시할 di.. 2020. 6. 12. 자바스크립트로 카카오맵 기반 마스크맵 만들기 3단계 대체 결과. html 위치 빨간색 박스안의 내용이 -> -> 다음 위치하게 되면 된다. 그리고 상단바 + 지도로 모든 화면을 채울거라 상단바 부터 전까지 몽땅 다 지운다 . 여기까지가 카카오맵을 만들기 위한 틀 준비과정... 2020. 6. 10. 이전 1 2 3 4 다음