[카카오 지도 API] 마커 이미지 색상 여러 가지로 변경해서 적용하기

마커 이미지 색상 변경하기

날짜별 장소를 구별할 수 있도록 마커 색상을 다르게 지정해야 했다.

그런데 카카오 지도 API 기본 마커 이미지는 파란색 밖에 없어서 아래 사이트에서 색상만 조절해서 6가지 색상으로 만들었다!

 

https://photokit.com/editor/?lang=ko

사진 편집기 - PhotoKit.com

[팔레트]를 눌러서 색상만 조절

 

변경된 마커 이미지 적용하기

1. 프로젝트 파일 내부에 마커 이미지 6개를 넣어놓고 markerImages에 1~6까지 파일 경로를 할당한다.

 

2. 장소를 선택하면 addSelectedMarker 함수가 호출된다.

마커 이미지를 6개 만들어두었으니 이미지가 순환되도록 만들면 1일차와 7일차는 같은 색상의 마커 이미지를 쓴다.

imageSrc에 마커 이미지 경로를 할당하려면, 1일차 -> markerImages[1]을 할당해야한다.

const imageIndex = (dayNum % 6) === 0 ? 6 : (dayNum % 6);

 

dayNum=1이면 1일차이고, imageIndex=1이 된다. 6일차면 imageIndex=6이 되도록 해서 1~6을 순환시킨다.

기존 코드에 하나로 고정되어 있던 imageSrc를 markerImages[imageIndex]로 바꾸면 마커 이미지 6개가 순환된다.

이렇게 다양한 마커 색상이 적용된다.

 

하지만 이렇게만 해두면 몇일차가 무슨 색인지 알 수 없으므로 장소명 앞에 숫자도 마커 색상과 알맞게 맞춰주자.

 

3. 장소명 앞에 숫자는 span id=${uniqueId} 태그로 나타낸다.

colors 배열에 0~5까지 마커 색상과 같은 색상 코드를 담아주고, span 태그에 style 속성을 줘서 글자 색상을 지정하면 된다.

 

markerImages를 0부터 시작하도록 했으면 됐는데 1부터 시작하게 해버려서 일관성이 없게 꼬여버렸다🫢

정리해보면,

colors[0]: red ~ colors[5]: purple

markerImages[1]: red ~ markerImages[6]: purple

이 된다.

 

그렇다면 dayNum=1 이면 getColorCode(1) 으로 colors[1]이 반환된다(X) colors[0]이 반환되어야 함(O)

그럼 return colors[index] 말고 colors[index-1]하면 -> OK!

 

위 코드처럼 알맞게 지정해주고 확인해보면 이제 마커 보기가 좀 더 쉬워졌다!