记录我的足迹

解锁国家:
2019.3:菲律宾
2019.7:柬埔寨
2020.10:越南
2021.5:新加坡,迪拜
2022.11:土耳其,格鲁吉亚
2023.8:泰国
2023.11:老挝
2024.4:马来西亚

解锁省份:
2023.4:湖南、重庆、贵州、云南

2023.7:香港
2024.4:福建
2024.5:广西
2024.6:江西
2024.7:海南
2025.2:四川

解锁山:
2020.10 七星岩
2023.3 白云山
2023.4 天门山、武陵源、岳麓山
2024.5 象鼻山
2024.6 衡山、武功山
2024.7 塘朗山
2024.11 阳台山、笔架山、莲花山、梧桐山、大南山、小南山
2025.5 西樵山
2025.6 罗浮山
2025.11 大夫山、越秀山

### JavaScript 实现“我的足迹”功能 要实现一个类似于“我的足迹”的功能,可以基于地理位置数据或者用户行为记录来完成。以下是使用 JavaScript 的一种可能实现方式: #### 功能概述 此功能的核心在于存储用户的访问历史或位置信息,并能够以某种形式展示这些数据。通常可以通过数组或其他结构化对象保存每次访问的信息。 --- #### 数据模型设计 假设我们希望跟踪用户的地理坐标以及时间戳,则每条记录可以用如下 JSON 对象表示: ```json { "timestamp": "2023-10-01T12:00:00Z", "location": { "latitude": 39.9042, "longitude": 116.4074 } } ``` --- #### HTML 结构 创建一个简单的页面用于演示如何收集和显示足迹。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Footprints</title> <style> ul { list-style-type: none; padding-left: 0; } li { margin-bottom: 10px; } </style> </head> <body> <h1>My Footprints</h1> <ul id="footprint-list"></ul> <button onclick="addFootprint()">Add Current Location as a Footprint</button> <script src="script.js"></script> </body> </html> ``` --- #### JavaScript 实现逻辑 下面是一个完整的脚本文件 `script.js` 来管理“我的足迹”。 ```javascript // 存储所有的足迹数据 let footprints = []; /** * 添加新的足迹到列表中 */ function addFootprint() { if (!navigator.geolocation) { alert('Geolocation is not supported by your browser.'); return; } navigator.geolocation.getCurrentPosition(function(position) { const timestamp = new Date().toISOString(); const locationData = { latitude: position.coords.latitude, longitude: position.coords.longitude }; // 创建一个新的足迹项 const footprint = { timestamp, location: locationData }; footprints.push(footprint); renderFootprints(); // 更新 UI 显示最新的足迹 }, function(error) { console.error('Error occurred while retrieving geolocation:', error); }); } /** * 渲染所有足迹到 DOM 中 */ function renderFootprints() { const listElement = document.getElementById('footprint-list'); listElement.innerHTML = ''; // 清空之前的足迹 footprints.forEach((fp, index) => { const listItem = document.createElement('li'); listItem.textContent = `${index + 1}. Time: ${fp.timestamp}, Lat: ${fp.location.latitude.toFixed(5)}, Lng: ${fp.location.longitude.toFixed(5)}`; listElement.appendChild(listItem); }); } ``` --- #### 关键技术点说明 1. **获取当前位置**: 使用浏览器内置的 Geolocation API 获取当前设备的位置[^4]。 2. **数据持久化**: 如果需要长期保存足迹数据,可考虑将其存入本地存储(Local Storage 或 IndexedDB),以便刷新页面后仍能保留数据[^3]。 3. **UI 展示**: 利用动态生成 DOM 节点的方式实时更新界面中的足迹列表[^5]。 --- ### 示例扩展 为了使功能更加完善,还可以加入以下特性: - 地图集成:借助 Google Maps API 或 Leaflet 将足迹标记在地图上; - 时间筛选:允许按日期范围过滤足迹; - 删除操作:提供删除单个或全部足迹的功能。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值