-
카카오 map api 받아서 React에서 지도 구현하기react 2023. 3. 9. 14:573. 플랫폼을 눌러서 각자 필요한 카테고리에 들어간 후 사이트 도메인을 추가해 준다.
(나는 리액트여서 https://localhost:3000로 해줬다)
- visual.studio.code로 돌아가서 public 의 index.html에 발급받은 카카오지도 javascript 키를 발급받아 추가 해준다.(키값이라고 적은곳에 발급받은 키를 넣어주면 된다.)나는 탭에 따라 다른 지도를 보여줘야 했으므로 네개를 발급 받았는데 더 좋은 방법이 있다면 알려주세요~~!//index.html // header에 스크립트로 키값을 넣어줬다 <!DOCTYPE html> <html lang="en"> <head> <div id="tab-1" class="tab-content current"> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값1" ></script> </div> <div id="tab-2" class="tab-content"> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값2" ></script> </div> <div id="tab-3" class="tab-content"> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값3" ></script> </div> <div id="tab-4" class="tab-content"> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값4" ></script> </div>import { useEffect } from 'react' import styled from 'styled-components' export default function DistributionMap() { useEffect(() => { let container = document.getElementById('map') let options = { center: new window.kakao.maps.LatLng(37.523174, 127.191053), level: 3, } let map = new window.kakao.maps.Map(container, options) map.setDraggable(false) console.log(map) let zoomControl = new window.kakao.maps.ZoomControl() map.addControl(zoomControl, window.kakao.maps.ControlPosition.RIGHT) let markerPosition = new window.kakao.maps.LatLng(37.523174, 127.191057) let marker = new window.kakao.maps.Marker({ position: markerPosition, }) marker.setMap(map) }, []) return ( <Container> <div id="map" style={{ width: '800px', height: '500px' }}></div> </Container> ) }1. options에 center는 중심이 될 위도 경도를 나타내며 level은 지도의 축적을 말한다.
2. zoom control은 줌을 할 수 있게 해주는 도구인데 내장되어있다.3. marker position으로 마커의 위치를 정할 수가 있다.
'react' 카테고리의 다른 글
Next.js 에러 (0) 2023.02.16 Next.js (0) 2022.09.05
