如何修改Gmaps.js代码实现动态标记点间的连续路径绘制？

嘿，刚好我对Gmaps.js的路径绘制比较熟，帮你把这个问题搞定！

你现在用的drawRoute方法默认是处理两点间的路径，但要实现第一→第二→第三…依次连接所有标记点，只需要循环遍历你的坐标数组，把每一组相邻的点作为起点和终点来绘制路径段就行，具体步骤如下：

1. 准备好有序的坐标数组 #

首先把从数据库获取的坐标按你想要的连接顺序整理成数组，比如：

// 示例：按顺序排列的坐标点数组
const orderedPoints = [
  [-12.044012922866312, -77.02470665341184], // 第1个点
  [-12.090814532191756, -77.02271108990476], // 第2个点
  [-12.105, -77.028], // 第3个点（可以继续添加更多）
  [-12.112, -77.035]  // 第4个点
];

2. 循环绘制相邻点的路径段 #

用for循环遍历数组，每次取当前点和下一个点作为origin和destination，调用drawRoute绘制单段路径：

// 遍历数组，依次绘制每一段路径
for (let i = 0; i < orderedPoints.length - 1; i++) {
  map.drawRoute({
    origin: orderedPoints[i],
    destination: orderedPoints[i + 1],
    travelMode: 'driving', // 可根据需求改为'walking'/'bicycling'
    strokeColor: '#783bf2',
    strokeOpacity: 0.6,
    strokeWeight: 5 // 调整路径线条的粗细，你之前的代码没写完，这里补全
  });
}

关键说明 #

• 一定要保证坐标数组是按你需要的连接顺序排列的，这样路径才会按第一→第二→第三的顺序连贯起来
• 所有路径段用相同的样式参数（颜色、透明度、粗细），视觉上就会像一条完整的路径
• 注意：Gmaps.js的drawRoute依赖Google Maps Directions API，要确保你的API密钥已经启用了这个服务，否则会出现报错

这样修改后，就能实现你想要的依次连接所有标记点的效果啦！

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