我太懂这个纠结点了！想画出一条带箭头的虚线折线，结果发现strokeOpacity在图标数组里只能分段设置——虚线部分要把它设成0来制造空白间隔，可箭头又需要它是正值才能显示，完全矛盾对吧？这里有两个实用的解决方案：

方案一：叠加两条折线（直观易维护） #

思路很简单：用一条折线专门实现虚线效果，另一条短折线只负责显示末端箭头，把它们叠加在一起就好。

// 1. 创建纯虚线折线（无箭头）
const dashedPolyline = new google.maps.Polyline({
  path: yourPathArray, // 替换成你的路径数组
  strokeColor: "#FF0000",
  strokeOpacity: 1,
  strokeWeight: 2,
  icons: [{
    icon: {
      path: 'M 0,0 0,0', // 空路径，靠repeat制造虚线间隔
      strokeOpacity: 1,
      scale: 1
    },
    offset: '0',
    repeat: '20px' // 调整这个值控制虚线的疏密
  }]
});

// 2. 创建带箭头的短折线（仅覆盖末端）
const arrowPolyline = new google.maps.Polyline({
  // 取路径的最后两个点，保证箭头刚好接在虚线末端
  path: [
    yourPathArray[yourPathArray.length - 2],
    yourPathArray[yourPathArray.length - 1]
  ],
  strokeColor: "#FF0000", // 和虚线颜色保持一致
  strokeOpacity: 1,
  strokeWeight: 2,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.FORWARD_ARROW,
      strokeColor: "#FF0000",
      strokeOpacity: 1,
      scale: 3 // 调整箭头大小
    },
    offset: '100%' // 把箭头放在折线末端
  }]
});

// 将两条折线都添加到地图上
dashedPolyline.setMap(map);
arrowPolyline.setMap(map);

这个方法的好处是逻辑清晰，不用纠结图标数组的复杂配置，后期调整虚线样式或箭头样式都很方便。

方案二：单折线多图标配置（更简洁） #

如果不想用两条折线，也可以在同一个图标数组里同时定义虚线和箭头，通过精准控制offset和repeat来避免冲突：

const dashedLineWithArrow = new google.maps.Polyline({
  path: yourPathArray,
  strokeColor: "#FF0000",
  strokeOpacity: 0, // 基础线条完全透明，靠图标实现所有视觉效果
  strokeWeight: 2,
  icons: [
    // 第一组图标：实现虚线效果
    {
      icon: {
        path: 'M 0,0 L 10,0', // 10px长的实线段
        strokeOpacity: 1,
        strokeWeight: 2,
        strokeColor: "#FF0000"
      },
      offset: '0',
      repeat: '20px' // 10px实线 + 10px空白，组成虚线
    },
    // 第二组图标：添加末端箭头
    {
      icon: {
        path: google.maps.SymbolPath.FORWARD_ARROW,
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        scale: 3
      },
      offset: '100%' // 固定在折线末端
    }
  ]
});

dashedLineWithArrow.setMap(map);

这里的关键是把基础折线的strokeOpacity设为0，完全依赖图标来渲染线条和箭头，这样就不会出现strokeOpacity的冲突问题了。

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