Polyline显示异常求助：Lat/Lng数组绘制Polyline问题

首先，我注意到你的坐标数组是每3个元素为一组（纬度、经度、heading方向角），但Polyline组件通常只需要纯坐标对（Lat/Lng），不需要额外的heading参数——这大概率就是显示异常的核心原因！

第一步：过滤冗余数据，提取有效坐标点 #

你需要先把数组里的heading值和无效的null值过滤掉，只保留每组的前两个元素（纬度和经度），组成标准的坐标数组。以JavaScript为例，处理代码可以这样写：

// 你的原始坐标数组
const rawCot = [-37.582214,172.307343,null,-37.576828,172.321808,65.0,-37.155396,173.440231,65.0,-37.151962,173.45285,70.0,-37.148872,173.465286,70.0,-37.145985,173.477768,75.0,-37.138184,173.520584,75.0,-37.136169,173.532623,80.0,-37.054092,174.024567,80.0,-37.052032,174.03653,70.0];

// 提取纯坐标对，跳过无效值
const polylineCoords = [];
for (let i = 0; i < rawCot.length; i += 3) {
  const lat = rawCot[i];
  const lng = rawCot[i + 1];
  if (lat !== null && lng !== null) {
    polylineCoords.push({ lat, lng });
  }
}

第二步：用处理后的坐标绘制Polyline #

假设你使用的是Google Maps JavaScript API，现在可以用这个干净的坐标数组创建Polyline：

const polyline = new google.maps.Polyline({
  path: polylineCoords,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2
});

polyline.setMap(map); // 将Polyline添加到目标地图实例

额外小贴士 #

• 如果heading值对你的业务有作用（比如标记路径方向），可以单独提取出来，用带旋转图标的Marker来展示，不要和Polyline的坐标数据混在一起。
• 务必检查数组中的无效值（比如第一个元素里的null），过滤后能避免Polyline解析出错。

如果按上述步骤处理后仍有问题，可以补充说明你使用的地图库（比如Leaflet、高德地图等），以及具体的异常表现（比如线条断裂、完全不显示、位置偏移等），这样能更精准地定位问题~

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