如何从Leaflet的L.GPX对象中提取GPS坐标(_latlngs数据)

问题根源 #

你遇到的问题主要有两个原因：

1. 异步加载时机问题：你设置了async: true，GPX文件是异步加载的，创建track变量后立刻访问属性时，文件还没加载完成，所以_latlngs会返回undefined。
2. 私有属性访问风险：直接访问带下划线的_latlngs是Leaflet及插件的内部私有属性，结构可能随版本更新变化，不推荐直接依赖。

解决方案 #

使用Leaflet GPX插件提供的公开API和加载完成事件来安全提取坐标：

代码示例

var track = new L.GPX('tracce_gpx/Subit(via Porzûs)_Attimis.gpx', {
  async: true,
  display_wpt: false,
  color: '#a539a8',
  opacity: 0.6,
  weight: 6
}).addTo(Video);

// 监听GPX加载完成事件，确保数据已就绪
track.on('loaded', function(e) {
  // 使用插件公开方法getLatLngs()获取坐标数据
  var gpxPathSegments = e.target.getLatLngs();
  
  // 处理多段路径（若GPX包含多个<trkseg>），扁平化数组
  var allLatLngs = gpxPathSegments.flat(Infinity);
  
  // 提取纯经纬度数值数组（按需使用）
  var rawCoords = allLatLngs.map(latlng => [latlng.lat, latlng.lng]);
  
  // 验证结果
  console.log('完整坐标对象数组:', allLatLngs);
  console.log('纯经纬度数值数组:', rawCoords);
});

关键说明 #

• loaded事件：只有当GPX文件加载解析完成后才会触发，此时所有坐标数据已就绪。
• getLatLngs()方法：插件提供的公开方法，返回的是L.LatLng对象数组（多段路径时为二维数组），比直接访问私有属性更稳定。
• 扁平化处理：如果你的GPX包含多个路径段（<trkseg>标签），getLatLngs()会返回数组的数组，用flat(Infinity)可以快速合并为一维数组。

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