Update index.html

index.html

@@ -34,7 +34,7 @@
         }
 
         .leaflet-tile-container img {
-            opacity: 0.6 !important;
+            opacity: 0.4 !important;
             filter: grayscale(100%) brightness(0) invert(1) !important;
         }
 
@@ -251,6 +251,7 @@
         let lastPosition = null;
         let lastUpdateTime = 0;
         const updateInterval = 1000;
+        let isInitialLoad = true;
 
         function initSocket() {
             socket = io();
@@ -336,24 +337,18 @@
                     icon: createUserIcon(username)
                 }).addTo(map);
                 map.setView([latitude, longitude], 16);
-                lastPosition = newPosition;
             } else {
-                if (lastPosition) {
-                    const distance = map.distance(
-                        [lastPosition.lat, lastPosition.lng],
-                        [latitude, longitude]
-                    );
-                    
-                    // Only create footprints if moved more than 2 meters
-                    if (distance > 2) {
-                        const angle = getAngle(lastPosition, newPosition);
-                        placeFootprint(newPosition, angle);
-                        lastPosition = newPosition;
-                    }
-                }
                 userMarker.setLatLng([latitude, longitude]);
+                // 只在非初次加载且有上一个位置时创建脚印
+                if (!isInitialLoad && lastPosition) {
+                    const angle = getAngle(lastPosition, newPosition);
+                    placeFootprint(newPosition, angle);
+                }
             }
 
+            isInitialLoad = false;
+            lastPosition = newPosition;
+
             socket.emit('update_location', {
                 username: username,
                 location: newPosition
@@ -364,26 +359,32 @@
             for (const [name, data] of Object.entries(users)) {
                 if (name === username) continue;
 
+                const newPos = { lat: data.location.lat, lng: data.location.lng };
+                
                 if (!otherUsers[name]) {
-                    otherUsers[name] = L.marker([data.location.lat, data.location.lng], {
-                        icon: createUserIcon(name)
-                    }).addTo(map);
+                    otherUsers[name] = {
+                        marker: L.marker([newPos.lat, newPos.lng], {
+                            icon: createUserIcon(name)
+                        }).addTo(map),
+                        lastPosition: null
+                    };
                 } else {
-                    const oldPos = otherUsers[name].getLatLng();
-                    const newPos = L.latLng(data.location.lat, data.location.lng);
-                    otherUsers[name].setLatLng(newPos);
-
-                    const angle = getAngle(
-                        { lat: oldPos.lat, lng: oldPos.lng },
-                        { lat: newPos.lat, lng: newPos.lng }
-                    );
-                    placeFootprint(data.location, angle);
+                    const oldPos = otherUsers[name].lastPosition;
+                    otherUsers[name].marker.setLatLng([newPos.lat, newPos.lng]);
+                    
+                    if (oldPos) {
+                        const angle = getAngle(oldPos, newPos);
+                        placeFootprint(newPos, angle);
+                    }
                 }
+                
+                otherUsers[name].lastPosition = newPos;
             }
 
+            // 清理断开连接的用户
             for (const name of Object.keys(otherUsers)) {
                 if (!users[name]) {
-                    map.removeLayer(otherUsers[name]);
+                    map.removeLayer(otherUsers[name].marker);
                     delete otherUsers[name];
                 }
             }
@@ -391,7 +392,7 @@
 
         function removeUser(username) {
             if (otherUsers[username]) {
-                map.removeLayer(otherUsers[username]);
+                map.removeLayer(otherUsers[name].marker);
                 delete otherUsers[username];
             }
         }