OSM自定义折线添加带弹窗标记失败，求可行解决方案

你的标记代码失效的核心原因是坐标索引错误+数组越界，咱们一步步拆解问题：

• 你的polyline1数组里，每个子元素的结构是[纬度, 经度]，也就是索引0对应纬度、1对应经度，但你写的polyline1[i][2]完全不存在——每个子数组只有2个元素，最大索引是1，这直接导致代码报错。
• 另外Leaflet的L.marker()要求传入的坐标顺序是[纬度, 经度]，你写反成了[经度, 纬度]，就算没越界，标记也会出现在完全错误的位置。

修正后的可运行代码 #

var polyline1 = [ 
  [44.772142, 17.208980], 
  [44.774753, 17.207644], 
  [44.773964, 17.199587], 
  [44.770823, 17.199207], 
  [44.771399, 17.195699], 
];

// 优化：折线无需循环创建，一次生成即可（原代码会重复叠加5条相同折线）
L.polyline(polyline1, { color: 'red' }).addTo(map);

// 循环添加带弹窗的标记
for (var i = 0; i < polyline1.length; i++) {
  // 提取当前点的经纬度
  const lat = polyline1[i][0];
  const lng = polyline1[i][1];
  // 创建标记并绑定弹窗
  const marker = L.marker([lat, lng])
    .bindPopup(`坐标：${lat.toFixed(6)}, ${lng.toFixed(6)}`) // 弹窗显示格式化后的坐标，更清晰
    .addTo(map);
}

额外小提示 #

你原来的折线循环逻辑也有冗余：每次循环都重新创建并添加整个polyline1的折线，最终地图上会叠加5条完全一样的红色折线，完全没必要，只需要调用一次L.polyline(...).addTo(map)就够了。

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