diff --git a/README.md b/README.md index 430ea78..05a153e 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ Naver Map에는 단일 Polyline 중심의 부드러운 경로선을 먼저 그 집 판정은 설정된 집 좌표를 중심점으로 한 50m 반경을 기준으로 합니다. GPS 튐 보정이 켜져 있으면 집 주변 1.2km 안의 지점은 집 주변 GPS 흔들림으로 흡수하고, 외출은 연속된 외부 지점이 5분 이상 지속될 때만 세션으로 확정합니다. 외부 지점 사이의 공백이 2시간을 넘으면 해당 구간은 알 수 없는 구간으로 보고 외출 지속시간에 합산하지 않습니다. 여러 번 나갔다 돌아온 경우 집 체류 시간은 합산하고, 외출은 출발/복귀 단위의 세션으로 따로 보여줍니다. -기록 시간 슬라이더를 움직이면 선택 마커가 해당 시점으로 이동하고, 지도 아래에는 `월. 일. 시간` 형식의 선택 시각만 간결하게 표시합니다. 경로 재생도 같은 선택 마커를 사용합니다. 80m 반경 안에서 10분 이상 머문 구간은 체류 지점 마커로 묶어 표시하며, 클릭 시 체류 시간과 시작/종료 시각을 확인할 수 있습니다. +기록 시간 슬라이더를 움직이면 선택 마커가 해당 시점으로 이동하고, 지도 아래에는 `월. 일. 시간` 형식의 선택 시각만 간결하게 표시합니다. 경로 재생도 같은 선택 마커를 사용합니다. 재생 버튼은 지점 수에 따라 의미 있는 배속만 남겨 `2x`, `5x`, `10x`, `20x`, `50x`, `100x`, `500x` 순서로 돌고, 각 배속에서 최소 80단계 이상 보여줄 수 없으면 해당 배속은 건너뜁니다. 80m 반경 안에서 10분 이상 머문 구간은 체류 지점 마커로 묶어 표시하며, 클릭 시 체류 시간과 시작/종료 시각을 확인할 수 있습니다. 라이브 위치에는 설정된 집 50m 원, GPS 정확도 원, 500m/1km 현재 위치 반경 원을 함께 표시합니다. `Naver 지도` 버튼은 히스토리 선택 지점 또는 현재 위치를 Naver 지도에서 바로 엽니다. diff --git a/js/main.js b/js/main.js index 35e91e9..6c020d3 100644 --- a/js/main.js +++ b/js/main.js @@ -439,6 +439,8 @@ const deviceLang = (navigator.language || navigator.userLanguage || "en").starts selectedMarker: null, playbackTimer: null, playbackIndex: 0, + playbackSpeed: 1, + playbackSpeedOptions: [1], rangeCircles: [], homeCircle: null, homeCenter: null, @@ -469,6 +471,10 @@ let langCode = localStorage.getItem("currentLang") || deviceLang, _overrideRange, wakeLock = null; +const PLAYBACK_SPEEDS = [2, 5, 10, 20, 50, 100, 500]; +const PLAYBACK_MIN_VISIBLE_STEPS = 80; +const PLAYBACK_TICK_MS = 160; + const FALLBACK_BACK_TARGET = 'https://chaegeon.com/'; const BACK_LINK_PATH_TITLE = { '/': '채건닷컴', @@ -1397,7 +1403,7 @@ function updateMapToolLabels() { const t = translations[langCode] || translations.ko; const labelMap = { fit: t.mapFit, - play: mapState.playbackTimer ? t.mapPause : t.mapPlay, + play: mapState.playbackTimer ? `${t.mapPause} ${mapState.playbackSpeed}x` : t.mapPlay, filter: t.historyFiltered, naver: t.openNaverMap, }; @@ -1904,18 +1910,26 @@ function stopHistoryPlayback() { updateMapToolLabels(); } -function toggleHistoryPlayback() { - if (!mapState.map || !mapState.historyPoints?.length) return; - if (mapState.playbackTimer) { - stopHistoryPlayback(); - return; +function getPlaybackSpeedOptions(points) { + const count = Array.isArray(points) ? points.length : 0; + const speeds = PLAYBACK_SPEEDS.filter(speed => count / speed >= PLAYBACK_MIN_VISIBLE_STEPS); + return speeds.length ? speeds : [1]; +} + +function startHistoryPlayback(speed) { + const points = mapState.historyPoints; + if (!mapState.map || !points?.length) return; + + stopHistoryPlayback(); + mapState.playbackSpeed = speed; + + if (mapState.playbackIndex >= points.length - 1) { + mapState.playbackIndex = 0; } - const points = mapState.historyPoints; - let index = 0; if (!mapState.playbackMarker) { mapState.playbackMarker = new naver.maps.Marker({ - position: points[0].latlng, + position: points[mapState.playbackIndex].latlng, map: mapState.map, zIndex: 120, icon: { @@ -1925,19 +1939,49 @@ function toggleHistoryPlayback() { }); } else { mapState.playbackMarker.setMap(mapState.map); - mapState.playbackMarker.setPosition(points[0].latlng); + mapState.playbackMarker.setPosition(points[mapState.playbackIndex].latlng); } + let tick = 0; mapState.playbackTimer = setInterval(() => { + const index = Math.min(mapState.playbackIndex || 0, points.length - 1); const point = points[index]; moveSelectedHistoryPoint(index, false); - if (index % 8 === 0) mapState.map.panTo(point.latlng); - index += 1; - if (index >= points.length) stopHistoryPlayback(); - }, Math.max(120, Math.min(450, 10000 / points.length))); + if (tick % 8 === 0) mapState.map.panTo(point.latlng); + + const nextIndex = index + speed; + if (nextIndex >= points.length) { + moveSelectedHistoryPoint(points.length - 1, false); + stopHistoryPlayback(); + return; + } + + mapState.playbackIndex = nextIndex; + tick += 1; + }, PLAYBACK_TICK_MS); updateMapToolLabels(); } +function toggleHistoryPlayback() { + if (!mapState.map || !mapState.historyPoints?.length) return; + const points = mapState.historyPoints; + const options = getPlaybackSpeedOptions(points); + mapState.playbackSpeedOptions = options; + + if (mapState.playbackTimer) { + const currentIndex = options.indexOf(mapState.playbackSpeed); + const nextSpeed = currentIndex >= 0 ? options[currentIndex + 1] : options[0]; + if (nextSpeed) { + startHistoryPlayback(nextSpeed); + } else { + stopHistoryPlayback(); + } + return; + } + + startHistoryPlayback(options[0]); +} + function clearTrackLines() { if (mapState.trackLine) { mapState.trackLine.setMap(null);