免费开源的地图

采用的是leafletjs和OSM的瓦片图层来实现的，下面的简单代码可以直接使用，其他用法可以参考leaflet的官网 https://leafletjs.cn/

点击查看代码 


</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>
posted @ 2025-12-04 14:12  leecoders  阅读(8)  评论(0)    收藏  举报