Update index.html

index.html

@@ -72,6 +72,24 @@
             background: #f5f5f5;
             border-radius: 5px;
             font-size: 12px;
+            position: relative;
+        }
+
+        .delete-button {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background: #ff4444;
+            color: white;
+            border: none;
+            border-radius: 3px;
+            padding: 2px 6px;
+            font-size: 11px;
+            cursor: pointer;
+        }
+
+        .delete-button:hover {
+            background: #ee3333;
         }
 
         .dialog {
@@ -144,6 +162,7 @@
         let map;
         let marker;
         let checkinLocation;
+        let markers = [];
         const STORAGE_KEY = 'mapCheckins';
 
         // 初始化地图
@@ -242,11 +261,16 @@
 
         // 加载已有的打卡记录
         function loadCheckins() {
+            // 清除现有标记
+            markers.forEach(marker => map.removeLayer(marker));
+            markers = [];
+            
             const checkins = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
-            checkins.forEach(checkin => {
-                L.marker([checkin.location.lat, checkin.location.lng])
+            checkins.forEach((checkin, index) => {
+                const marker = L.marker([checkin.location.lat, checkin.location.lng])
                     .bindPopup(checkin.note)
                     .addTo(map);
+                markers.push(marker);
             });
             updateCheckinList();
         }
@@ -257,12 +281,13 @@
             const recordsContainer = document.getElementById('checkinRecords');
             recordsContainer.innerHTML = '';
 
-            checkins.reverse().forEach(checkin => {
+            checkins.reverse().forEach((checkin, index) => {
                 const item = document.createElement('div');
                 item.className = 'checkin-item';
                 item.innerHTML = `
                     <div>${checkin.note}</div>
                     <div style="color: #666; font-size: 11px;">${checkin.timestamp}</div>
+                    <button class="delete-button" onclick="deleteCheckin(${checkins.length - 1 - index})">删除</button>
                 `;
                 recordsContainer.appendChild(item);
             });
@@ -274,6 +299,16 @@
             list.style.display = list.style.display === 'none' ? 'block' : 'none';
         }
 
+        // 删除打卡记录
+        function deleteCheckin(index) {
+            if (confirm('确定要删除这条记录吗？')) {
+                let checkins = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+                checkins.splice(index, 1);
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(checkins));
+                loadCheckins(); // 重新加载记录和标记
+            }
+        }
+
         // 初始化地图
         initMap();
     </script>