findmydevice 얼굴 재생 마커와 자동 추적 차단

js/main.js

@@ -1925,23 +1925,22 @@ function startHistoryPlayback(speed) {
 
     stopHistoryPlayback();
     setCurrentLocationVisible(false);
+    if (mapState.openInfoWindow) {
+        mapState.openInfoWindow.close();
+        mapState.openInfoWindow = null;
+    }
     mapState.playbackSpeed = speed;
 
     if (mapState.playbackIndex >= points.length - 1) {
         mapState.playbackIndex = 0;
     }
 
-    if (!mapState.playbackMarker) {
-        mapState.playbackMarker = new naver.maps.Marker({
-            position: points[mapState.playbackIndex].latlng,
-            map: mapState.map,
-            zIndex: 120,
-            icon: {
-                content: '<div class="history-playback-marker"></div>',
-                anchor: new naver.maps.Point(11, 11)
-            }
-        });
-    } else {
+    if (mapState.playbackMarker) {
+        mapState.playbackMarker.setMap(null);
+    }
+    moveSelectedHistoryPoint(mapState.playbackIndex, false);
+
+    if (mapState.playbackMarker) {
         mapState.playbackMarker.setMap(mapState.map);
         mapState.playbackMarker.setPosition(points[mapState.playbackIndex].latlng);
     }
@@ -2061,14 +2060,12 @@ function moveSelectedHistoryPoint(index, pan = false, syncSlider = true) {
             position: point.latlng,
             map: mapState.map,
             zIndex: 115,
-            icon: {
-                content: '<div class="history-selected-marker"></div>',
-                anchor: new naver.maps.Point(10, 10)
-            }
+            icon: createFaceMarkerIcon()
         });
     } else {
         mapState.selectedMarker.setMap(mapState.map);
         mapState.selectedMarker.setPosition(point.latlng);
+        mapState.selectedMarker.setIcon(createFaceMarkerIcon());
     }
     if (mapState.playbackMarker) {
         mapState.playbackMarker.setPosition(point.latlng);
@@ -2085,15 +2082,20 @@ function moveSelectedHistoryPoint(index, pan = false, syncSlider = true) {
     }
 }
 
+function createFaceMarkerIcon(size = 60) {
+    const half = size / 2;
+    return {
+        content: `<div style="width:${size}px; height:${size}px; background:url('https://chaegeon.com/custom/findmydevice/img/30c0fc9d9.png') no-repeat center/contain;"></div>`,
+        anchor: new naver.maps.Point(half, half)
+    };
+}
+
 function createMainMarker(latlng) {
     mapState.marker = new naver.maps.Marker({
         position: latlng,
         map: mapState.map,
         zIndex: 100,
-        icon: {
-            content: `<div style="width:60px; height:60px; background:url('https://chaegeon.com/custom/findmydevice/img/30c0fc9d9.png') no-repeat center/contain;"></div>`,
-            anchor: new naver.maps.Point(30, 30)
-        }
+        icon: createFaceMarkerIcon()
     });
     applyMarkerEffects(mapState.marker);
 }
@@ -2335,7 +2337,7 @@ function renderHistoryPoints(rawPoints) {
         mapState.historyBoundsFitted = true;
     }
 
-    if (!mapState.initialInfoOpened && mapState.historyEndMarker?.infoWindow) {
+    if (!_overrideRange && !mapState.initialInfoOpened && mapState.historyEndMarker?.infoWindow) {
         mapState.historyEndMarker.infoWindow.open(mapState.map, mapState.historyEndMarker);
         mapState.openInfoWindow = mapState.historyEndMarker.infoWindow;
         mapState.initialInfoOpened = true;