[010/API] Kakao Map API | 마커 커스텀하기

1.  문제상황

---

현재는 카카오에서 제공해주는 위의 기본마커를 사용하고 있다.

그런데 핸드폰 대리점들은 각 통신사별로 표시하고 싶다! LGU+, SKT, KT 이렇게 나뉘어져 있는데 대리점들을 이 통신사별로 나눠 다른 마커로 표시하려고 한다.

 

2.  지도에 통신사별로 다른 마커 찍기

---

1단계 이미지 준비

---

👉🏻일단 먼저 이미지를 준비하자! 나는 static에 mapmarker라는 디렉토리를 파서 마커 이미지들을 저장했다. (ALLmarker는 현위치에 사용할 마커이다.)

💡static이란? 정적 파일들로 개발자가 프로젝트를 진행할 때 사용하기 위해 미리 서버해 저장해둔 파일을 지칭한다. 이번 예시처럼 이미지를 저장하기도 하고 css, js 파일들을 저장하기도 한다.

//map.html
//마커 이미지의 이미지 주소입니다.
var imageSrcSKT = "../static/mapmarker/SKTmarker.png"; //파랑
var imageSrcKT = "../static/mapmarker/KTmarker.png"; //빨강
var imageSrcLG = "../static/mapmarker/LGmarker.png"; //분홍
var imageSrc = "../static/mapmarker/ALLmarker.png"; //현위치

👉🏻그리고 각각의 이미지 경로들을 변수에 저장했다.

 

2단계 통신사마다 다른 마커로 찍어주기

---

//map.html
function addMarker(List) {
	removeMarker();
	storeInMap = [];
	if (Object.keys(List).length > 0) {
    
	//지도에 있는 스토어 마커 찍기
	for (var i = 0; i < Object.keys(List).length; i ++) {
            storeInMap.push(List[i])
            var imageSize = new kakao.maps.Size(31, 35);

            let imgSrc = ''
            if (List[i].tag === "SK") {
               imgSrc = imageSrcSKT
            } else if (List[i].tag === "KT") {
               imgSrc = imageSrcKT
            } else if (List[i].tag ==="LG") {
               imgSrc = imageSrcLG
            }

            let marker = new kakao.maps.Marker({
                 map: map, 
                 position: new kakao.maps.LatLng(List[i].lat, List[i].lon), 
                 title : List[i].name, 
                 image : new kakao.maps.MarkerImage(imgSrc, imageSize), 
                 clickable: true 
             });

             markers.push(marker);
     }
 }

👉🏻전체 코드는 다음과 같다. 그 중 아래 코드에 집중해보자!

(이 코드에 대해 궁금하다면 2022.04.11 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 가게 위치 ajax로 불러오기 이 링크를 참조해보자!)

let imgSrc = ''
if (List[i].tag === "SK") {
   imgSrc = imageSrcSKT
} else if (List[i].tag === "KT") {
   imgSrc = imageSrcKT
} else if (List[i].tag ==="LG") {
   imgSrc = imageSrcLG
}

👉🏻ajax로 받아온 대리점들 목록을 for문 돌리면서 tag를 확인한다. 각 tag에 맞게 이미지 경로를 imgSrc라는 변수에 할당한다.

let marker = new kakao.maps.Marker({
     map: map, 
     position: new kakao.maps.LatLng(List[i].lat, List[i].lon), 
     title : List[i].name, 
     image : new kakao.maps.MarkerImage(imgSrc, imageSize), 
     clickable: true 
 });

👉🏻그리고 이 imgSrc를 Marker의 image에 활용하면 된다! 

🐰그러면 이렇게 알록달록하게 통신사별로 마커가 찍힌다! 현위치도 마커가 잘 바뀌었다!