몽땅뚝딱 개발자

[React] 카카오맵 사용하기 With. 타입스크립트 - (3) 커스텀 마커 사용하기 본문

Development/React.js · Next.js

[React] 카카오맵 사용하기 With. 타입스크립트 - (3) 커스텀 마커 사용하기

레오나르도 다빈츠 2023. 2. 16. 21:37

 

 

 

 

 

 

📄 커스텀 마커

const container = document.getElementById('map')
const mainPosition = new window.kakao.maps.LatLng(33.453502, 126.569894)
const options = {
  center: mainPosition, // 지도의 중심 좌표
  level: 5, // 지도의 레벨(확대, 축소 정도)
}

const content =
  '<div class ="label"><span class="left"></span><span class="center">🌈</span><span class="right"></span></div>'

const mainOverlay = new window.kakao.maps.CustomOverlay({
  position: mainPosition, // 위치
  content: content, // 태그
})

const map = new window.kakao.maps.Map(container, options)

mainOverlay.setMap(map) // 메인 위치 set

 

 

 


개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

 

 

Comments