如何在地图展示起终点备选路线？现有代码异常求助

我仔细看了你的代码，发现几个关键问题导致备选路线无法正常显示，咱们一步步来修复：

1. 未开启备选路线请求开关 #

Google Maps Directions API 默认只返回一条最优路线，必须在请求参数里添加 provideRouteAlternatives: true，才会返回备选路线。检查你的请求对象，确保包含这个配置：

const request = {
  origin: origin,
  destination: destination,
  travelMode: google.maps.TravelMode.DRIVING,
  provideRouteAlternatives: true // 必须开启这个才能获取备选路线
};

2. 复用单个 DirectionsRenderer 导致路线被覆盖 #

你现在的代码里，循环中可能复用了同一个 DirectionsRenderer 实例，而每个实例只能显示一条路线，后面的设置会覆盖前面的，最终只显示最后一条路线。正确的做法是为每条备选路线创建独立的 DirectionsRenderer 实例：

// 定义一组区分度高的颜色，可根据路线数量调整
const routeColors = ['#FF4444', '#00C851', '#33B5E5', '#FFBB33'];

response.routes.forEach((route, index) => {
  // 为每条路线新建一个渲染器
  const routeRenderer = new google.maps.DirectionsRenderer({
    map: map, // 绑定到你的地图实例
    directions: response,
    routeIndex: index, // 指定当前要渲染的路线索引
    polylineOptions: {
      strokeColor: routeColors[index % routeColors.length], // 循环使用颜色，避免索引越界
      strokeWeight: 6, // 调粗线条，让不同路线更易区分
      strokeOpacity: 0.8
    }
  });
});

3. 额外检查事项 #

• 确认你的 Google Cloud 控制台已经启用了 Directions API，并且 API 密钥拥有该接口的访问权限，否则请求会静默失败，没有路线数据返回。
• 确保地图实例 map 在执行路线渲染前已经完成初始化，比如在 React 中要放在 useEffect 里，等地图加载完成后再发起路线请求。
• 如果备选路线数量超过你定义的颜色数量，用 index % routeColors.length 循环复用颜色，避免出现颜色 undefined 的情况。

如果之前设置 direction 只显示单条路径，就是因为没有开启 provideRouteAlternatives，且用单个渲染器只能显示一条路线。按照上面的修改，就能同时展示多条不同颜色的备选路线了。

内容的提问来源于stack exchange，提问作者Ahmet Kuşlular