Spaces:

mistpe
/

mapceshi

Running

File size: 10,111 Bytes

<!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>