Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- React Native
- returnType
- Chart.js
- NonNullable
- click and drag
- JS console
- javascript
- 제네릭
- 반복줄이기
- 타입좁히기
- 레이아웃쪼개기
- 폰트적용하기
- 리액트
- React.js
- 2022
- 성능최적화
- vue.js
- 타입스크립트
- utilty type
- 커스텀
- CSS
- 공통컴포넌트
- 개발콘텐츠
- 티스토리꾸미기
- reactjs
- 누구나 자료구조와 알고리즘
- react
- const 단언문
- typescript
- TSDoc
Archives
- Today
- Total
몽땅뚝딱 개발자
[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
개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
'Development > React.js · Next.js' 카테고리의 다른 글
[React] 소소한 깨달음과 팁 정리 (with. TypeScript) (0) | 2023.03.07 |
---|---|
[React] useMemo (0) | 2023.02.17 |
[React] 카카오맵 사용하기 With. 타입스크립트 - (2) 마커 출력하기 (0) | 2023.02.16 |
[React] 카카오맵 사용하기 With. 타입스크립트 - (1) key 발급과 스크립트 적용하기 (0) | 2023.02.16 |
[React] ThemeProvider 사용하기 (0) | 2023.02.15 |
Comments