如何实现CSV文件拖拽上传到Leaflet地图并展示经纬度坐标？

• 现代浏览器默认走ev.dataTransfer.items分支，你这部分代码仅打印了文件名，没有任何CSV解析、加载到地图的逻辑，相当于有效代码根本没执行
• 就算走到ev.dataTransfer.files分支，你给L.geoCsv传的是文件名，而该插件要求传入的是CSV的纯文本内容，没有读取文件内容自然无法渲染
• 存在重复添加图层的冗余操作，map.addLayer和addTo(map)功能完全一致，留一个即可
• 注意检查你的CSV字段分隔符、经纬度字段名是否和插件配置匹配，默认插件识别lat/lng或latitude/longitude作为经纬度字段，如有自定义字段名要额外配置

<div id="map" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"></div>
<script type="text/javascript" src="../js/leaflet.geocsv.js"></script>
<script>
// 提前初始化Leaflet地图，保证map是全局可访问的变量
var map = L.map('map').setView([39.9, 116.3], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

function dragOverHandler(ev) {
  ev.preventDefault();
  // 拖拽时的样式反馈，可按需删除
  ev.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)';
}

function dropHandler(ev) {
  ev.preventDefault();
  ev.currentTarget.style.backgroundColor = 'transparent';
  
  let file = null;
  // 统一兼容两种文件读取接口
  if (ev.dataTransfer.items) {
    for (let i = 0; i < ev.dataTransfer.items.length; i++) {
      if (ev.dataTransfer.items[i].kind === 'file') {
        file = ev.dataTransfer.items[i].getAsFile();
        break;
      }
    }
  } else {
    file = ev.dataTransfer.files[0];
  }

  // 校验文件格式，可按需删除
  if (!file || file.type !== 'text/csv' && !file.name.endsWith('.csv')) {
    console.log('请拖拽CSV格式文件');
    return;
  }

  // 用FileReader读取CSV纯文本内容
  const reader = new FileReader();
  reader.onload = function(e) {
    const csvContent = e.target.result;
    // fieldSeparator要和你实际CSV的分隔符一致，常用逗号，按需调整
    const geoLayer = L.geoCsv(csvContent, {
      firstLineTitles: true,
      fieldSeparator: ','
      // 如果经纬度字段不是默认名，取消注释并修改字段名即可
      // latitudeTitle: 'lat',
      // longitudeTitle: 'lon'
    });
    geoLayer.addTo(map);
    // 自动缩放到CSV数据范围，可按需删除
    map.fitBounds(geoLayer.getBounds());
  };
  reader.readAsText(file);
}
</script>

• 确保全局map变量初始化完成后再执行添加图层的操作，避免变量未定义报错
• 必须匹配CSV实际的分隔符，很多中文环境导出的CSV是逗号分隔，不要硬写分号
• 如果拖拽后还是不显示，可以在reader.onload里打印csvContent检查内容是否读取正确，也可以打印geoLayer.getLayers()看是否生成了对应的点要素

内容的提问来源于stack exchange，提问作者QGIS-user