如何在HTML客户端通过JavaScript读取同目录location.data文件用于Leaflet地图？

推荐使用Fetch API读取数据，它比XMLHttpRequest语法更简洁直观，且原生支持JSON解析。以下是完整的location.html实现代码，包含Leaflet地图展示逻辑：

<!DOCTYPE html>
<html>
<head>
    <title>当前位置展示</title>
    <!-- 引入Leaflet样式 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <!-- 引入Leaflet脚本 -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        #map { height: 400px; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        // 初始化地图（临时默认中心点，后续会更新）
        const map = L.map('map').setView([44.17, 15.60], 13);
        // 加载OpenStreetMap瓦片图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        // 读取位置数据并展示
        fetch('location.data')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}`);
                }
                return response.json(); // 自动解析JSON为对象
            })
            .then(locationData => {
                // 转换经纬度为数字类型（原数据是字符串）
                const lat = parseFloat(locationData.lat);
                const lon = parseFloat(locationData.lon);
                
                // 添加位置标记及弹窗信息
                L.marker([lat, lon]).addTo(map)
                    .bindPopup(`
                        海拔: ${locationData.altitude}m<br>
                        速度: ${locationData.speed}m/s<br>
                        定位时间: ${new Date(parseInt(locationData.timestamp)).toLocaleString()}
                    `)
                    .openPopup();
                
                // 将地图中心定位到当前位置
                map.setView([lat, lon], 15);
            })
            .catch(error => {
                console.error('读取数据出错:', error);
                alert('无法获取位置数据，请检查文件路径或服务器配置');
            });
    </script>
</body>
</html>

关键说明 #

• Fetch API：通过fetch('location.data')发起请求，response.json()直接将返回的JSON字符串转为JavaScript对象，无需手动调用JSON.parse()。
• 数据转换：原数据中的经纬度是字符串格式，必须用parseFloat()转为数字，才能被Leaflet识别使用。
• Leaflet集成：先完成地图基础初始化，获取到位置数据后添加标记、绑定详情弹窗，并将地图中心切换到当前位置。
• 错误处理：通过.catch()捕获请求失败或解析错误，方便排查问题。

排查要点 #

如果仍无法读取数据，检查以下内容：

• 确认location.data与location.html在服务器的同一目录下。
• 打开浏览器开发者工具的「网络」面板，查看location.data的请求状态是否为200。
• 若服务器未设置location.data的Content-Type为application/json，可将response.json()替换为response.text().then(text => JSON.parse(text))手动解析。

内容的提问来源于stack exchange，提问作者Shaun.M