findmydevice 히스토리 지도 표시 정리

README.md

@@ -5,10 +5,10 @@ Home Assistant에 기록된 Galaxy Z Fold7의 위치, 배터리, 활동 상태,
 ```html
 <meta charset="UTF-8">
 <script src="/custom/common/js/asset-reload.js?v=20260710_assetfix1" data-service="findmydevice"></script>
-<link href="/custom/findmydevice/css/style.css?v=20260710_assetfix1" rel="stylesheet" />
+<link href="/custom/findmydevice/css/style.css?v=20260710_map1" rel="stylesheet" />
 <div id="findmydevice"></div>
 <script src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=g3btu2qfeb"></script>
-<script src="/custom/findmydevice/js/main.js?v=20260710_assetfix1"></script>
+<script src="/custom/findmydevice/js/main.js?v=20260710_map1"></script>
 ```
 
 ## 기능
@@ -18,7 +18,7 @@ Home Assistant에 기록된 Galaxy Z Fold7의 위치, 배터리, 활동 상태,
 - 사용자 지정 기간 이동 경로 표시
 - 이동 기록 요약, 경로 전체 보기, 경로 재생, 시간 슬라이더
 - 부드러운 렌더링용 경로선, GPS 튐 보정 토글, 체류 지점 자동 표시
-- 설정된 집 좌표 기준 집 50m, 현재 위치 기준 500m/1km 반경 표시와 선택 지점 Naver 지도 열기
+- 설정된 집 좌표 기준 집 50m 원, GPS 정확도 원, 선택 지점 Naver 지도 열기
 - 집 체류 합산, 외출/복귀 세션, 마지막 복귀 시각과 현재 상태 표시
 - 배터리, 충전 상태, 배터리 건강, 온도, 전력, 활동 상태, 걸음 수, 이동 거리 표시
 - 네트워크, 기기, 화면/오디오, 건강/활동, 저장공간/데이터, 알림/통화, 센서 정보를 섹션별로 표시
@@ -74,7 +74,7 @@ Naver Map에는 단일 Polyline 중심의 부드러운 경로선을 먼저 그
 
 기록 시간 슬라이더를 움직이면 선택 마커가 해당 시점으로 이동하고, 지도 아래에는 `월. 일. 시간` 형식의 선택 시각만 간결하게 표시합니다. 경로 재생도 같은 선택 마커를 사용합니다. 재생 버튼은 지점 수에 따라 의미 있는 배속만 남겨 `2x`, `5x`, `10x`, `20x`, `50x`, `100x`, `500x` 순서로 돌고, 각 배속에서 최소 80단계 이상 보여줄 수 없으면 해당 배속은 건너뜁니다. 80m 반경 안에서 10분 이상 머문 구간은 체류 지점 마커로 묶어 표시하며, 클릭 시 체류 시간과 시작/종료 시각을 확인할 수 있습니다.
 
-라이브 위치에는 설정된 집 50m 원, GPS 정확도 원, 500m/1km 현재 위치 반경 원을 함께 표시합니다. `Naver 지도` 버튼은 히스토리 선택 지점 또는 현재 위치를 Naver 지도에서 바로 엽니다.
+라이브 위치에는 설정된 집 50m 원과 GPS 정확도 원만 표시합니다. 히스토리 범위 조회나 기록 재생 중에는 현재 위치 사진 마커와 정확도 원을 숨겨 경로 시작/종료/선택 지점만 보이게 합니다. `Naver 지도` 버튼은 히스토리 선택 지점 또는 현재 위치를 Naver 지도에서 바로 엽니다.
 
 ## 센서 표시 정책
 

js/main.js

@@ -1907,6 +1907,9 @@ function stopHistoryPlayback() {
         clearInterval(mapState.playbackTimer);
         mapState.playbackTimer = null;
     }
+    if (!_overrideRange) {
+        setCurrentLocationVisible(true);
+    }
     updateMapToolLabels();
 }
 
@@ -1921,6 +1924,7 @@ function startHistoryPlayback(speed) {
     if (!mapState.map || !points?.length) return;
 
     stopHistoryPlayback();
+    setCurrentLocationVisible(false);
     mapState.playbackSpeed = speed;
 
     if (mapState.playbackIndex >= points.length - 1) {
@@ -2105,32 +2109,18 @@ function createAccuracyCircle(latlng, accuracy = 50) {
         fillColor: '#007AFF',
         fillOpacity: 0.2
     });
-    updateCurrentRangeCircles(latlng);
 }
 
-function updateCurrentRangeCircles(latlng) {
+function clearCurrentRangeCircles() {
-    if (!mapState.map || !latlng) return;
+    if (!mapState.rangeCircles?.length) return;
-    const ranges = [
+    mapState.rangeCircles.forEach(circle => circle?.setMap?.(null));
-        { radius: 500, strokeColor: '#34c759', fillColor: '#34c759' },
+    mapState.rangeCircles = [];
-        { radius: 1000, strokeColor: '#ff9500', fillColor: '#ff9500' },
-    ];
-
-    ranges.forEach((range, index) => {
-        if (!mapState.rangeCircles[index]) {
-            mapState.rangeCircles[index] = new naver.maps.Circle({
-                map: mapState.map,
-                center: latlng,
-                radius: range.radius,
-                strokeColor: range.strokeColor,
-                strokeOpacity: 0.45,
-                strokeWeight: 1,
-                fillColor: range.fillColor,
-                fillOpacity: 0.035
-            });
-        } else {
-            mapState.rangeCircles[index].setCenter(latlng);
 }
-    });
+
+function setCurrentLocationVisible(visible) {
+    const map = visible ? mapState.map : null;
+    mapState.marker?.setMap?.(map);
+    mapState.circle?.setMap?.(map);
 }
 
 function applyMarkerEffects(marker) {
@@ -2378,6 +2368,8 @@ function updateDOMWithData(data) {
             initMap(baseLatLng, data.accuracy || 50);
         }
         updateConfiguredHome(data) || updateHomeCenter(data.latitude, data.longitude);
+        setCurrentLocationVisible(false);
+        clearCurrentRangeCircles();
 
         // 히스토리 궤적/포인트 업데이트
         if (data.history?.length > 0) {
@@ -2413,10 +2405,11 @@ function updateDOMWithData(data) {
     }
 
     // 메인 마커 / 정확도 원 업데이트
+    setCurrentLocationVisible(true);
     mapState.marker.setPosition(latlng);
     mapState.circle.setCenter(latlng);
     animateCircleRadius(Math.max(data.accuracy || 50, 10));
-    updateCurrentRangeCircles(latlng);
+    clearCurrentRangeCircles();
 
     // autoPosition
     const isChecked = document.getElementById('autoPositionSwitch').checked;