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

이번에는 실제로 마스크맵에서 사용하는 이미지를 불러서 카카오지도 마커에 반영시키고 

마스크 재고가 충분,부족,없음 과 같이 단계별로 나뉘었을때 이미지를 변경 시켜주는 수정작업을 할 예정입니다.

이미지는 https://maskmap.site/ 사이트를 참고하여 만들 예정입니다.

동그라미 칸과 같이 마커를 사용자가 정한 이미지로 변경할 예정.

우선 저 이미지의 경로가 어디인지 확인하기 위해 개발자도구(F12) 를 켠다.

맨 왼쪽 상단 마우스 커서모양을 선택하고 해당 이미지(충분,보통,부족 등등) 에 가져다가 클릭한다.

이처럼 src 안에 내용이 보일겁니다.

images/ic_lack@3x.png 복사해서 구글검색창에 검색함.

이와 같이 이미지 주소 복사를 하게되면 https://maskmap.site/images/ic_lack@3x.png 링크를 붙여넣기 할 수 있다.

메모장에 각 필요한 이미지들을 적어둡시다.

동적 마커를 찍을때 지난 시간에 settingMarker 라는 함수를 만들었고 $.ajax 통신을 지도의 좌표가 변경될때 이벤트가 발동되도록 하였습니다.

따라서 똑같이 for 반복문 안에서 작업합니다.

다음에서 이어서 진행하겠습니다.