카카오맵 api를 이용해서 웹에 특정 시간별로 위치 그리는 방법

728x90

SMALL

A장비, B장비의 n초 이후 위치데이터가 아래와 같이 있을 때 웹으로 구현했고 애니메이션 효과로 스무스하고 이동되는 느낌으로 구현했다.

const dummyTracks = {

A: [

{ lat: 37.5665, lng: 126.978 },

{ lat: 37.5667, lng: 126.9795 },

{ lat: 37.5669, lng: 126.981 },

{ lat: 37.5671, lng: 126.9822 },

{ lat: 37.5674, lng: 126.9838 },

B: [

{ lat: 37.565, lng: 126.976 },

{ lat: 37.5653, lng: 126.9776 },

{ lat: 37.5656, lng: 126.9791 },

{ lat: 37.566, lng: 126.9805 },

{ lat: 37.5664, lng: 126.982 },

};

* gps.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/web-default-layout}">
<head>
    <link rel="stylesheet" th:href="@{/css/gps/gps.css}">
    <script th:src="@{'//dapi.kakao.com/v2/maps/sdk.js?appkey=' + ${kakaoMapsApiKey}}"></script>
    <script type="module" th:src="@{/js/pages/gps/gps.js}"></script>
</head>
<body>
<div layout:fragment="content" id="main">
  <div class="wrapper">
    <div class="contents-header">
      <div class="page-title">GPS 모니터링</div>
    </div>
    <div class="contents-body">
      <div id="map"></div>
      <div class="legend">
        <div class="legend-item"><span class="dot a"></span>A 장비</div>
        <div class="legend-item"><span class="dot b"></span>B 장비</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

* gps.js

let map;
let markers = {};
let tick = 0;
const trackIndex = { A: 0, B: 0 };

// 더미 경로 데이터: 초(t)별 좌표 목록
const dummyTracks = {
  A: [
    { lat: 37.5665, lng: 126.9780 },
    { lat: 37.5667, lng: 126.9795 },
    { lat: 37.5669, lng: 126.9810 },
    { lat: 37.5671, lng: 126.9822 },
    { lat: 37.5674, lng: 126.9838 },
  ],
  B: [
    { lat: 37.5650, lng: 126.9760 },
    { lat: 37.5653, lng: 126.9776 },
    { lat: 37.5656, lng: 126.9791 },
    { lat: 37.5660, lng: 126.9805 },
    { lat: 37.5664, lng: 126.9820 },
  ],
};

window.initMap = function() {
  const center = new kakao.maps.LatLng(37.5665, 126.9780);
  map = new kakao.maps.Map(document.getElementById('map'), {
    center,
    level: 4,
  });

  // 초기 마커 생성
  markers.A = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(dummyTracks.A[0].lat, dummyTracks.A[0].lng),
  });
  markers.A.setMap(map);
  markers.B = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(dummyTracks.B[0].lat, dummyTracks.B[0].lng),
  });
  markers.B.setMap(map);

  // 부드러운 이동 애니메이션 시작 (1초에 한 구간)
  animateMarker('A', markers.A, dummyTracks.A, 1000);
  animateMarker('B', markers.B, dummyTracks.B, 1000);
}

// Easing (부드러운 가감속)
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

// 두 좌표 사이를 duration 동안 보간하며 이동
function animateBetween(marker, from, to, durationMs, onDone) {
  const start = performance.now();
  function step(now) {
    let t = (now - start) / durationMs;
    if (t > 1) t = 1;
    const et = easeInOutQuad(t);
    const lat = from.lat + (to.lat - from.lat) * et;
    const lng = from.lng + (to.lng - from.lng) * et;
    marker.setPosition(new kakao.maps.LatLng(lat, lng));
    if (t < 1) {
      requestAnimationFrame(step);
    } else if (typeof onDone === 'function') {
      onDone();
    }
  }
  requestAnimationFrame(step);
}

function animateMarker(key, marker, track, durationMs) {
  const len = track.length;
  const i = trackIndex[key] % len;
  const from = track[i];
  const to = track[(i + 1) % len];
  animateBetween(marker, from, to, durationMs, () => {
    trackIndex[key] = (trackIndex[key] + 1) % len;
    animateMarker(key, marker, track, durationMs);
  });
}

// 카카오 지도 로드가 끝난 뒤 초기화
window.addEventListener('load', () => {
  if (window.kakao && window.kakao.maps) {
    initMap();
  } else {
    const timer = setInterval(() => {
      if (window.kakao && window.kakao.maps) {
        clearInterval(timer);
        initMap();
      }
    }, 200);
  }
});

* gps.css

#main .wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.contents-body {
  position: relative;
  flex: 1;
  display: flex;
  gap: 12px;
}

#map {
  flex: 1;
  min-height: 600px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.legend {
  width: 200px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  height: fit-content;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.legend-item .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.legend-item .dot.a { background: #ff4d4f; }
.legend-item .dot.b { background: #1677ff; }

카카오 디벨로퍼 설정

https://developers.kakao.com/

난 이미 앱이 등록되어있었기 때문에 아래의 작업만 하면 되었다.

1) 앱 > 일반 > 앱 키 > javascript키를 api키로 사용

2) 카카오맵 > 사용설정 on

728x90

LIST

'개발 일지 👩‍💻' 카테고리의 다른 글

Python 가상환경과 externally-managed-environment 오류 해결 (1)	2025.08.20
brew install poppler 이런 명령어 실행하면 어디에 설치가 되는거야? (0)	2025.08.20
addEventListener의 세 번째 인자, true vs false 차이점! (캡처링 vs 버블링 쉽게 이해하기) (0)	2025.08.01
이벤트 캡처링(Capturing)과 버블링(Bubbling) 쉽게 이해하기 (0)	2025.08.01
최신 AI 모델 비교: Cursor AI에서 어떤 모델이 제일 좋을까? (3)	2025.07.31

Dev story

카카오맵 api를 이용해서 웹에 특정 시간별로 위치 그리는 방법

카카오 디벨로퍼 설정

'개발 일지 👩‍💻' 카테고리의 다른 글

티스토리툴바

카카오맵 api를 이용해서 웹에 특정 시간별로 위치 그리는 방법

카카오 디벨로퍼 설정

'개발 일지 👩‍💻' 카테고리의 다른 글

관련글

티스토리툴바