| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>地图打卡系统</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" /> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| } |
| |
| #map { |
| width: 100%; |
| height: 100vh; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .toolbar { |
| position: fixed; |
| bottom: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: white; |
| padding: 10px 20px; |
| border-radius: 20px; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| display: flex; |
| gap: 10px; |
| z-index: 1000; |
| } |
| |
| .button { |
| padding: 8px 16px; |
| border: none; |
| border-radius: 15px; |
| background: #4CAF50; |
| color: white; |
| font-size: 14px; |
| cursor: pointer; |
| transition: background-color 0.3s; |
| } |
| |
| .button:hover { |
| background: #45a049; |
| } |
| |
| .checkin-list { |
| position: fixed; |
| top: 10px; |
| right: 10px; |
| background: white; |
| padding: 10px; |
| border-radius: 10px; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| max-height: 50vh; |
| overflow-y: auto; |
| z-index: 1000; |
| } |
| |
| .checkin-item { |
| margin-bottom: 8px; |
| padding: 8px; |
| 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 { |
| display: none; |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| background: white; |
| padding: 20px; |
| border-radius: 10px; |
| box-shadow: 0 2px 20px rgba(0,0,0,0.2); |
| z-index: 1000; |
| width: 80%; |
| max-width: 300px; |
| } |
| |
| .dialog input { |
| width: 100%; |
| padding: 8px; |
| margin: 10px 0; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| } |
| |
| .dialog-buttons { |
| display: flex; |
| justify-content: flex-end; |
| gap: 10px; |
| margin-top: 15px; |
| } |
| |
| .overlay { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0,0,0,0.5); |
| z-index: 999; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="map"></div> |
| |
| <div class="toolbar"> |
| <button class="button" onclick="getCurrentLocation()">定位</button> |
| <button class="button" onclick="startCheckin()">打卡</button> |
| <button class="button" onclick="toggleCheckinList()">记录</button> |
| </div> |
|
|
| <div class="checkin-list" id="checkinList" style="display: none;"> |
| <h3>打卡记录</h3> |
| <div id="checkinRecords"></div> |
| </div> |
|
|
| <div class="overlay" id="overlay"></div> |
| <div class="dialog" id="checkinDialog"> |
| <h3>添加打卡记录</h3> |
| <input type="text" id="checkinNote" placeholder="添加备注..."> |
| <div class="dialog-buttons"> |
| <button class="button" onclick="cancelCheckin()">取消</button> |
| <button class="button" onclick="saveCheckin()">保存</button> |
| </div> |
| </div> |
|
|
| <script> |
| let map; |
| let marker; |
| let checkinLocation; |
| let markers = []; |
| const STORAGE_KEY = 'mapCheckins'; |
| |
| |
| function initMap() { |
| map = L.map('map').setView([39.9042, 116.4074], 11); |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| attribution: '© OpenStreetMap contributors' |
| }).addTo(map); |
| |
| |
| loadCheckins(); |
| |
| |
| map.on('click', function(e) { |
| checkinLocation = e.latlng; |
| if (marker) { |
| marker.setLatLng(checkinLocation); |
| } else { |
| marker = L.marker(checkinLocation).addTo(map); |
| } |
| }); |
| } |
| |
| |
| function getCurrentLocation() { |
| if (navigator.geolocation) { |
| navigator.geolocation.getCurrentPosition( |
| function(position) { |
| const lat = position.coords.latitude; |
| const lng = position.coords.longitude; |
| checkinLocation = L.latLng(lat, lng); |
| |
| map.setView(checkinLocation, 15); |
| |
| if (marker) { |
| marker.setLatLng(checkinLocation); |
| } else { |
| marker = L.marker(checkinLocation).addTo(map); |
| } |
| }, |
| function(error) { |
| alert('无法获取位置：' + error.message); |
| }, |
| { |
| enableHighAccuracy: true, |
| timeout: 5000, |
| maximumAge: 0 |
| } |
| ); |
| } else { |
| alert('您的浏览器不支持地理定位'); |
| } |
| } |
| |
| |
| function startCheckin() { |
| if (!checkinLocation) { |
| alert('请先在地图上选择位置或使用定位！'); |
| return; |
| } |
| document.getElementById('overlay').style.display = 'block'; |
| document.getElementById('checkinDialog').style.display = 'block'; |
| } |
| |
| |
| function cancelCheckin() { |
| document.getElementById('overlay').style.display = 'none'; |
| document.getElementById('checkinDialog').style.display = 'none'; |
| document.getElementById('checkinNote').value = ''; |
| } |
| |
| |
| function saveCheckin() { |
| const note = document.getElementById('checkinNote').value; |
| const checkin = { |
| location: { |
| lat: checkinLocation.lat, |
| lng: checkinLocation.lng |
| }, |
| note: note, |
| timestamp: new Date().toLocaleString() |
| }; |
| |
| let checkins = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); |
| checkins.push(checkin); |
| localStorage.setItem(STORAGE_KEY, JSON.stringify(checkins)); |
| |
| |
| L.marker([checkin.location.lat, checkin.location.lng]) |
| .bindPopup(note) |
| .addTo(map); |
| |
| cancelCheckin(); |
| updateCheckinList(); |
| } |
| |
| |
| function loadCheckins() { |
| |
| markers.forEach(marker => map.removeLayer(marker)); |
| markers = []; |
| |
| const checkins = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); |
| checkins.forEach((checkin, index) => { |
| const marker = L.marker([checkin.location.lat, checkin.location.lng]) |
| .bindPopup(checkin.note) |
| .addTo(map); |
| markers.push(marker); |
| }); |
| updateCheckinList(); |
| } |
| |
| |
| function updateCheckinList() { |
| const checkins = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); |
| const recordsContainer = document.getElementById('checkinRecords'); |
| recordsContainer.innerHTML = ''; |
| |
| 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); |
| }); |
| } |
| |
| |
| function toggleCheckinList() { |
| const list = document.getElementById('checkinList'); |
| 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> |
| </body> |
| </html> |
