点击查看代码
</details>
<!DOCTYPE html>
<html><head><title>我的开源地图</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head><body><div id="map" style="height: 400px;"></div><script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script><script>try {// 创建地图，指定初始坐标和缩放级别var map = L.map('map').setView([39.9042, 116.4074], 10); // 北京// 添加OSM的瓦片图层 - 使用全球标准服务器L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors',maxZoom: 19,subdomains: ['a', 'b', 'c']}).addTo(map);// 添加一个标记L.marker([39.9042, 116.4074]).addTo(map).bindPopup("北京 - 这是初始位置").openPopup();// 尝试获取用户位置if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) {var lat = position.coords.latitude;var lng = position.coords.longitude;// 添加用户位置标记L.marker([lat, lng]).addTo(map).bindPopup("您的当前位置").openPopup();// 移动地图到用户位置map.setView([lat, lng], 13);console.log('用户位置获取成功:', lat, lng);}, function(error) {console.warn('无法获取用户位置:', error.message);// 如果无法获取位置，至少显示地图});} else {console.warn('浏览器不支持地理位置功能');}console.log('地图加载成功！');} catch (error) {console.error('地图加载失败:', error);document.getElementById('map').innerHTML = '<p style="color: red; padding: 20px;">地图加载失败，请检查网络连接或刷新页面。</p>';}</script>
</body></html>