Gathering detailed insights and metrics for react-kakao-maps-sdk
Installations
npm install react-kakao-maps-sdkDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.20.3
NPM Version
10.7.0
Releases
45
Contributors
11
Unable to fetch Contributors
Languages
3
TypeScript
JavaScript
Shell
TypeScript (95.16%)
JavaScript (4.73%)
Shell (0.11%)
validate.email ๐
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
423,089
Last Day
1,016
Last Week
4,921
Last Month
20,347
Last Year
192,326
GitHub Statistics
MIT License
295 Stars
273 Commits
33 Forks
1 Watchers
3 Branches
11 Contributors
Updated on Mar 04, 2025
Bundle Size
25.56 kB
Minified
6.84 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.27
Package Id
react-kakao-maps-sdk@1.1.27
Unpacked Size
175.77 kB
Size
36.99 kB
File Count
71
NPM Version
10.7.0
Node Version
18.20.3
Published on
Jun 01, 2024
Total Downloads
Cumulative downloads
Total Downloads
423,089
Last Day
242.1%
1,016
Compared to previous day
Last Week
11.5%
4,921
Compared to previous week
Last Month
19.7%
20,347
Compared to previous month
Last Year
18.6%
192,326
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Usage
์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ํ์์ ์ผ๋ก Kakao ์ง๋ API๋ฅผ ๋ถ๋ฌ์์ผ ํฉ๋๋ค.
HTML Script Tag๋ฅผ ์ด์ฉํ์ฌ Kakao ์ง๋ API ๋ถ๋ฌ์ค๊ธฐ
1<script 2 type="text/javascript" 3 src="//dapi.kakao.com/v2/maps/sdk.js?appkey=๋ฐ๊ธ๋ฐ์ APP KEY๋ฅผ ๋ฃ์ผ์๋ฉด ๋ฉ๋๋ค.&libraries=services,clusterer" 4></script>
Hook์ ์ด์ฉํ์ฌ Kakao ์ง๋ API ๋ถ๋ฌ์ค๊ธฐ
1const Component = () => { 2 const [ loading, error ] = useKakaoLoader({ 3 appkey: "...", // ๋ฐ๊ธ ๋ฐ์ APPKEY 4 ...options // ์ถ๊ฐ ์ต์ 5 }) 6 7 return <> 8 ... 9 <> 10}
TypeScript
ํ์ ์คํฌ๋ฆฝํธ ์ฌ์ฉ์๋ฅผ ์ํด kakao.maps.d.ts ํจํค์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
tsconfig.json์ compilerOptions.types ์์ฑ์ kakao.maps.d.ts ํจํค์ง๋ฅผ ์ถ๊ฐํ์๋ฉด ๋ฉ๋๋ค.
1{ 2 ..., 3 "compilerOptions": { 4 ..., 5 "types": [ 6 ..., 7 "kakao.maps.d.ts" 8 ] 9 } 10}
Install
1npm install react-kakao-maps-sdk 2# or 3yarn add react-kakao-maps-sdk 4# or 5pnpm add react-kakao-maps-sdk
Simple Usage
๋งต์์ ๋ง์ปค์ ์ธํฌ์๋์ฐ ์ฌ๋ฆฌ๊ธฐ
1function(){ 2 return ( 3 <Map 4 center={{ lat: 33.5563, lng: 126.79581 }} 5 style={{ width: "100%", height: "360px" }} 6 > 7 <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}> 8 <div style={{color:"#000"}}>Hello World!</div> 9 </MapMarker> 10 </Map> 11 ) 12}
๋งต์์ ์ปค์คํ ์ค๋ฒ๋ ์ด ์ฌ๋ฆฌ๊ธฐ
1function(){ 2 return ( 3 <Map 4 center={{ lat: 33.5563, lng: 126.79581 }} 5 style={{ width: "100%", height: "360px" }} 6 > 7 <CustomOverlayMap position={{ lat: 33.55635, lng: 126.795841 }}> 8 <div 9 style={{padding:"42px", backgroundColor:"#fff", color:"#000"}} 10 > 11 Custom Overlay! 12 </div> 13 </CustomOverlayMap> 14 </Map> 15 ) 16}
๋งต์์ ๋ง์ปค ํด๋ฌ์คํฐ ์ฌ๋ฆฌ๊ธฐ
โป ์ฐธ๊ณ : ํด๋น ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ์ฌ์ฉ์๋ ๋ฐ๋์
clustererlibrary๋ฅผ ๋ถ๋ฌ์์ผ ํฉ๋๋ค.
1function(){ 2 return ( 3 <Map 4 center={{ lat: 36.2683, lng: 127.6358 }} 5 style={{ width: "100%", height: "360px" }} 6 level={14} 7 > 8 <MarkerClusterer 9 averageCenter={true} 10 minLevel={10} 11 > 12 {clusterPositionsData.positions.map((pos) => ( 13 <MapMarker 14 key={`${pos.lat}-${pos.lng}`} 15 position={pos} 16 /> 17 ))} 18 </MarkerClusterer> 19 </Map> 20 ) 21}
Documentation
Working list
- Map
- Marker
- InfoWindow
- CustomOverlay
- MarkerClusterer
- AbstractOverlay
- Shape
- Circle, Polyline, Polygon, Rectangle, Ellipse
- DrawingBox
- Roadview
- Marker
- InfoWindow
- CustomOverlay
- StaticMap
Contribute
ISSUE์ PR ๋ํ์ ์ ๋๋ค..!!
No vulnerabilities found.
No security vulnerabilities found.