如何移除Google Map折线符号及动画圆圈下方的线条？

没问题，这两个需求都可以通过调整Polyline的属性来实现，我来一步步给你讲清楚：

一、移除折线中符号下方的基础线条 #

要隐藏折线本身的线条，只保留上面的符号，核心是把折线的线条透明度设为0，或者直接将线条颜色设为透明。因为Google Maps的Polyline中，strokeOpacity属性控制线条的透明度，设为0后，折线本身就看不见了，只会显示叠加在上面的符号。

举个简单的实现示例：

const polyline = new google.maps.Polyline({
  path: yourPathCoordinates, // 替换为你的路径坐标数组
  strokeOpacity: 0, // 隐藏折线本身的线条
  icons: [{
    icon: yourCustomSymbol, // 你定义的符号（比如圆圈、箭头等）
    offset: "0%"
  }]
});
polyline.setMap(map);

二、修改动画示例：移除黑色线条，让绿色圆圈在虚线上移动 #

针对你提到的动画符号场景，我们需要做两个关键调整：

1. 隐藏承载动画符号的折线的黑色线条
2. 额外添加一条虚线折线作为背景，让动画圆圈在它上方移动

下面是修改后的完整代码逻辑：

// 1. 定义路径（可替换为你的目标路径）
const flightPath = [
  {lat: 37.772, lng: -122.214},
  {lat: 21.291, lng: -157.821},
  {lat: -18.142, lng: 178.431},
  {lat: -27.467, lng: 153.027}
];

// 2. 创建虚线背景折线
const dashedBackgroundLine = new google.maps.Polyline({
  path: flightPath,
  strokeColor: "#666666", // 自定义虚线颜色，比如灰色
  strokeOpacity: 1.0,
  strokeWeight: 2,
  strokeDashArray: [10, 5] // 控制虚线样式：10px实线段 + 5px间隔
});
dashedBackgroundLine.setMap(map);

// 3. 创建承载动画符号的折线，隐藏自身线条
const animatedSymbolLine = new google.maps.Polyline({
  path: flightPath,
  strokeOpacity: 0, // 隐藏折线本身的黑色线条
  icons: [{
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 6,
      fillColor: "#00FF00", // 绿色圆圈
      fillOpacity: 1,
      strokeColor: "#000000",
      strokeWeight: 1
    },
    offset: "100%",
    repeat: "0%"
  }]
});
animatedSymbolLine.setMap(map);

// 4. 保留原有的动画逻辑
function animateCircle() {
  const icons = animatedSymbolLine.get("icons");
  icons[0].offset = (parseFloat(icons[0].offset) - 1) + "%";
  animatedSymbolLine.set("icons", icons);
  requestAnimationFrame(animateCircle);
}
// 启动动画
animateCircle();

这样调整后，你就能看到绿色的动画圆圈在灰色虚线上移动，完全看不到原来的黑色折线了。

内容的提问来源于stack exchange，提问作者Jeffrey M Castro