Google Maps API多路线点击变色高亮问题求助

看起来你的代码有几个关键问题导致点击事件没效果，我来帮你一步步修复：

问题分析 #

• 变量覆盖问题：你在循环里每次都把新的DirectionsRenderer赋值给同一个directionsDisplay变量，最后只有最后一条路线会绑定点击事件，其他路线完全没监听。
• 作用域与变量访问问题：点击事件回调里的res是directionsService.route回调内部的变量，外部访问不到；而且你硬写routeIndex: 0，不管点击哪条都只会修改第一条路线。
• 缺少路线实例管理：没有保存所有路线的DirectionsRenderer实例，没法在点击某条路线时，把其他路线恢复成默认颜色。

修复后的完整代码 #

// 保存所有路线的DirectionsRenderer实例
let directionsRenderers = [];
const directionsService = new google.maps.DirectionsService;

directionsService.route({
  origin: { lat: sourceLat, lng: sourceLon },
  destination: { lat: destLat, lng: destLon },
  provideRouteAlternatives: true,
  travelMode: google.maps.TravelMode['DRIVING']
}, (res, status) => {
  if (status == google.maps.DirectionsStatus.OK) {
    // 循环创建每条路线的渲染器
    for (let i = 0, len = res.routes.length; i < len; i++) {
      const renderer = new google.maps.DirectionsRenderer({
        map: this.map,
        directions: res,
        routeIndex: i,
        suppressMarkers: true,
        polylineOptions: {
          strokeColor: "darkgrey",
          strokeOpacity: 1.0,
          strokeWeight: 7
        }
      });

      // 给当前渲染器绑定点击事件
      google.maps.event.addListener(renderer, 'click', () => {
        // 先把所有路线恢复默认颜色
        directionsRenderers.forEach(r => {
          r.setOptions({
            polylineOptions: {
              strokeColor: "darkgrey",
              strokeOpacity: 1.0,
              strokeWeight: 7
            }
          });
        });
        // 高亮当前点击的路线
        renderer.setOptions({
          polylineOptions: {
            strokeColor: 'green',
            strokeOpacity: 1.0,
            strokeWeight: 7
          }
        });
      });

      // 把当前渲染器加入数组管理
      directionsRenderers.push(renderer);
    }
  }
});

关键修复点说明 #

• 用数组保存所有渲染器实例：directionsRenderers数组存储每一条路线的DirectionsRenderer，这样能统一管理所有路线的样式。
• 循环里用let声明变量：避免循环变量的作用域问题，确保每个点击事件都能正确关联对应的路线渲染器。
• 点击事件里先重置所有路线样式：这样每次点击只会高亮当前路线，其他路线自动恢复默认灰色，提升交互体验。
• 直接操作当前渲染器：不需要重复设置map、directions这些属性，只修改polylineOptions就能改变颜色，更高效。

这样修改后，点击任意路线都会立刻变成绿色高亮，其他路线恢复灰色，完全符合你的需求~

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