向Leaflet地图添加CSV点位数据后无标记点显示，代码问题排查求助

问题描述 #

我有一个Leaflet地图，需要以点标记形式展示德国境内的若干位置。我尝试通过如下代码加载本地存储的CSV文件，但地图上没有显示任何点位。我的数据中包含Latitude和Longitude字段，我使用这两列数据在地图上展示点位但始终没有成功。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
        <style>
            #mapid { height: 880px; }
        </style>
        <title>OSM and Leaflet</title>
        
    </head>
    <body>
        <div id="mapid"></div>
        
        <script>
            const map = L.map('mapid').setView([50.875, 9.141], 6);

            const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

            const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            const tiles = L.tileLayer(tileUrl, {attribution});
            tiles.addTo(map);
            //const marker = L.marker([50.875, 9.141]).addTo(map);

            $.get('./data.csv', function(csvString) {

            // Use PapaParse to convert string to array of objects
            var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;

            // For each row in data, create a marker and add it to the map
            // For each row, columns `Latitude`, `Longitude`, and `Title` are required
            for (var i in data) {
            var row = data[i];

            var marker = L.marker([row.Latitude, row.Longitude], {
            opacity: 1
            }).bindPopup(row.Title);
  
            marker.addTo(map);
            }

            });

            /*marker.bindPopup('<h1>hello</h1>');
            marker.on('mouseover', function (e) {
            this.openPopup();
            });
            
            marker.on('mouseout', function(event){
            marker.closePopup();
            });*/
        </script>
    </body>
</html>

数据格式参考 #

排查修复步骤 #

• 检查CSV文件路径：确认你的HTML文件同级目录下存在data.csv文件，路径拼写错误会导致请求失败，无点位渲染。
• 检查CSV字段名：确认CSV的列名严格为Latitude、Longitude、Title，大小写、拼写有偏差的话读取到的字段值为undefined，Leaflet不会渲染无效坐标的标记。
• 解决本地跨域限制：不要直接双击打开HTML文件用file协议访问，浏览器同源策略会禁止读取本地CSV文件。你可以用本地服务启动项目：比如使用VS Code的Live Server插件，或者在项目目录下执行Python命令启动简易服务：
  • Python3环境执行 python -m http.server
  • Python2环境执行 python -m SimpleHTTPServer
    启动后通过http://localhost:8000的形式访问页面即可正常读取本地CSV。
• 添加无效数据过滤：PapaParse解析时会把CSV末尾的空行解析为空对象，遍历到空行时会报错终止渲染，你可以在遍历逻辑中添加过滤规则：

$.get('./data.csv', function(csvString) {
  var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
  for (var i in data) {
    var row = data[i];
    // 过滤空行和坐标缺失的无效数据
    if(!row || !row.Latitude || !row.Longitude) continue;
    var marker = L.marker([row.Latitude, row.Longitude], {
      opacity: 1
    }).bindPopup(row.Title ? row.Title : '');
    marker.addTo(map);
  }
// 添加加载失败回调，方便定位问题
}).fail(function() {
  alert('CSV文件加载失败，请检查路径是否正确');
})

完整修正后代码 #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
        <style>
            #mapid { height: 880px; }
        </style>
        <title>OSM and Leaflet</title>
        
    </head>
    <body>
        <div id="mapid"></div>
        
        <script>
            const map = L.map('mapid').setView([50.875, 9.141], 6);
            const attribution = '&copy; OpenStreetMap contributors';
            const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            const tiles = L.tileLayer(tileUrl, {attribution});
            tiles.addTo(map);

            $.get('./data.csv', function(csvString) {
                var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
                for (var i in data) {
                    var row = data[i];
                    if(!row || !row.Latitude || !row.Longitude) continue;
                    var marker = L.marker([row.Latitude, row.Longitude], {
                        opacity: 1
                    }).bindPopup(row.Title ? row.Title : '');
                    marker.addTo(map);
                }
            }).fail(function() {
                alert('CSV文件加载失败，请检查路径是否正确');
            });
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Salman