분류 전체보기55 자바스크립트로 카카오맵 기반 마스크맵 만들기 7단계 이번에는 실제로 마스크맵에서 사용하는 이미지를 불러서 카카오지도 마커에 반영시키고 마스크 재고가 충분,부족,없음 과 같이 단계별로 나뉘었을때 이미지를 변경 시켜주는 수정작업을 할 예정입니다. 이미지는 https://maskmap.site/ 사이트를 참고하여 만들 예정입니다. 동그라미 칸과 같이 마커를 사용자가 정한 이미지로 변경할 예정. 우선 저 이미지의 경로가 어디인지 확인하기 위해 개발자도구(F12) 를 켠다. 맨 왼쪽 상단 마우스 커서모양을 선택하고 해당 이미지(충분,보통,부족 등등) 에 가져다가 클릭한다. 이처럼 src 안에 내용이 보일겁니다. images/ic_lack@3x.png 복사해서 구글검색창에 검색함. 이와 같이 이미지 주소 복사를 하게되면 https://maskmap.site/imag.. 2020. 6. 18. 자바스크립트로 카카오맵 기반 마스크맵 만들기 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 14 다음