자바스크립트로 카카오맵 기반 마스크맵 만들기 5단계

이번 포스팅에선 카카오지도만 있는 웹페이지에 

실제 정부에서 관리하고있는 마스크 수량 보유 약국 데이터 들을 어떻게 받아 오는지,

그 받아온 데이터를 어떻게 가공해서 마커를 찍어내는지 알아볼 차례입니다.

처음이라 정적데이터를 가지고 만들어보겠습니다. ( 고정된 값 ) 

추후 동적으로 데이터 변경해서 마커 생성 ( 지도의 중앙값 위치에 따라 데이터가 바뀜 )

공적데이터포털 이라고 검색하고 https://www.data.go.kr/ 에 들어가게 되면

검색창이 하나 나오는데 마스크 검색 후 오픈 API 를 찾게 되면 다음과 같이 나옵니다.

우리는 지도상에 좌표(위/경도)를 통해 마커를 찍을거라 빨간색 박스 안의 서비스를 클릭 합니다.

위 사진의 URL 주소를 잘 복사 해두십시오.

저 URL 주소를 직접 클릭해보면 

이러한 JSON 형식의 데이터를 확인 할 수 있습니다.

stores 안에 addr,code,create_at,lat,lng,name,remain_stat,stock_at,type 이 있고 

이 데이터는 자바스크립트만을 이용하여 통신하고, 데이터 반환받고, 예쁘게 꾸미고 할 예정입니다.

좌표(위_경도) 기준 공적 마스크 판매정보 제공 서비스.docx

참고 문서에 따르면

빨간색 박스처럼 lat,lng,m 을 파라미터로 보내어 전송 할 수 있습니다.

lat(위도), lng(경도) , m(반경) 을 조합해보자면 lat=34&lng=125&m=5000 은 

34위도,125경도 기준으로 반경 5000미터 내에 있는 약국을 보여주는 요청 URL 이라고 볼 수 있습니다.

자바스크립트에선 어떻게 통신하는가??

먼저 jquery의 ajax 통신을 하기 위해  <script src="vendor/jquery/jquery.min.js"></script> 를 추가한다.

기본적인 구조는 위 사진과 같습니다.

ajax 통신을 url,type 정보를 같이 던져준 결과가 done(function(data)부분의 data이고 data를 가지고 가공하면 되겠습니다.

하나씩 

샘플로 끼워넣자면

$.ajax({

url: "https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/storesByGeo/json?lat=37.5010881&lng=127.0342169&m=5000",

dataType: "json"

}).done(function(data){

console.log(data);

});

- 개발자도구(F12) - CONSOLE 창 확인 결과 -

사진과 같이 나오게 된다.

위도 : 37.5010881 경도 : 37.5010881 기준으로 반경 5000 안에 있는 데이터가 나오게 된다. 

count:799 이니까 799개의 약국 정보가 나오게 됩니다.

아주 간단한 for 반복문 하나를 추가하였고, https://apis.map.kakao.com/web/sample/basicMarker/ 안에 자바스크립트를 복사 하였습니다.

기존에 

// 마커가 표시될 위치입니다 
var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

이부분을 

이렇게 변경 하였습니다.

data -> stores 의 idx 번째 lat , lng 정보로 대체 

그러면 반복문을 돌면서 정적으로 고정된 마커들의 값을 불러올 수 있게 됩니다.

다음 포스팅에선 지도 좌표를 움직였을때 동적으로 변경 시키고 움직인 곳 이외에는 마커를 삭제하고, 새로 불러올 수 있도록 하는 포스팅을 해보도록 하겠습니다.

감사합니다.