■ 카카오맵 api 활용해서 지도 불러오기
(1) 카카오 디벨로퍼스에 가입 및 앱 생성 후 앱키(javascript 키) 를 받아서 index.html 에 추가해주었다.
(key 는 .env.local 파일에 환경변수로 만들어서 사용!)
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_KEY%&libraries=services,clusterer"
></script>
</body>
(2) 사용할 컴포넌트 안에서 지도 불러오기
https://apis.map.kakao.com/web/sample/basicMap/
카카오에 api 가이드가 잘 정리되어 있어서 참고해서 쉽게 지도를 불러올 수 있다.
// 예시코드
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
<div id="map" style="width:100%;height:350px;"></div>이때 지도를 표시할 mapContainer의 'map' 과 <div id="map"> 은 같아야 한다.
■ 지도에 자전거 경로 그리기
공공데이터포털 사이트에서 자전거 도로 api 를 받아 만든 db.json 이다. 나는 이 중 id와 roadLine 을 이용해서 지도를 출력해주었다.
roadLine에는 대략 8천개정도의 데이터가 배열안 객체형태로 들어있는데 이중 위도 좌표값 LINE_XP 와 경도 좌표값 LINE_YP 를 이용해서 경로를 선으로 그려주었다.
8천개 중 하나를 지도에 찍어보면 점으로 나오는데 이 점이 8천개가 모여서 선이 된다.
* 공공데이터포털(https://www.data.go.kr/index.do) - 여러 데이터, 오픈API 들을 제공한다.
최종 코드
부모 컴포넌트인 Posting.jsx 에서 db.json의 feed 데이터를 map으로 순회해서 RidingMap 컴포넌트에 id와 roadLine을 props로 내려주었다. id 값은 container와 <div> id값으로 넣어주어 피드 별로 각각의 지도를 만들어주었다.
지도에서 보여줄 중심 좌표로는 roadLine의 중간 값의 좌표를 넣어주어 linePath 가 보이도록 해주었다.
나는 마우스 드래그로 지도 이동 기능을 막고 싶어서 옵션에 draggable: false 를 추가하였다.
import { useEffect } from "react";
const { kakao } = window;
const RidingMap = ({ id, roadLine }) => {
useEffect(() => {
const container = document.getElementById(id);
const options = {
// 지도에서 보여줄 중심좌표 - roadLine 의 중간값 좌표를 넣어주었다.
center: new kakao.maps.LatLng(
roadLine[Math.floor(roadLine.length / 2)].LINE_XP,
roadLine[Math.floor(roadLine.length / 2)].LINE_YP
),
level: 11, // linePath 전체가 보이도록 지도 확대 레벨을 늘려주었다.
draggable: false
};
const map = new kakao.maps.Map(container, options);
// 빈 배열의 linePath 를 선언하여 roadLine을 forEach 문으로 각 linePath의 LatLng를 넣어주었다.
// 선을 구성하는 좌표배열
const linePath = [];
roadLine.forEach((el) => linePath.push(new kakao.maps.LatLng(el.LINE_XP, el.LINE_YP)));
const polyline = new kakao.maps.Polyline({
path: linePath,
strokeWeight: 5, // 선의 두께
strokeColor: "#ff3700", // 선의 색깔
strokeOpacity: 0.7, // 선의 투명도
strokeStyle: "solid" // 선의 스타일
});
// 지도에 선을 표시
polyline.setMap(map);
}, []);
return <div id={id} style={{ width: "300px", height: "230px" }}></div>;
};
export default RidingMap;
출력한 지도 모습
🧐 느낀점
이것저것 클릭해보고 시도해본 뒤인 지금은 조금 사용이 익숙해졌지만 처음 api 사용 가이드를 봤을 때는 이게 무슨말이고 어떻게 활용해야하는 지 막막했다. 그치만 여러 api 들을 활용해보면서 활용할 수 있는 데이터들이 정말 많은 것 같다 느꼈고 조금 자신감이 생겼다.
혼자 부딪혀보고 삽질도 해봐야 온전하게 내 것으로 만들 수 있는 것 같다.
'TIL' 카테고리의 다른 글
| 아웃소싱 팀 프로젝트 ⑤ - 모달창에 지도 불러오기 (0) | 2024.09.21 |
|---|---|
| 아웃소싱 팀 프로젝트 ④ - Infinite Scroll (0) | 2024.09.20 |
| 아웃소싱 팀 프로젝트 ② - 기능구현(따봉) (0) | 2024.09.15 |
| 아웃소싱 팀 프로젝트 ① - 기획 (1) | 2024.09.13 |
| Github PR 로만 merge 하도록 설정 (0) | 2024.09.12 |
