Leaflet Routing Machine如何为路线添加点击popup或tooltip（Angular环境）

核心逻辑为监听路由控件的路线生成事件，给每个路线图层绑定点击事件关联popup即可实现需求，对应效果如下：

• 先完成leaflet、leaflet-routing-machine的依赖引入和基础配置，确保Angular组件中地图、路由控件可以正常生成导航路线。
• 在初始化L.Routing.control后，绑定routesfound事件，该事件会在路线计算完成后触发，可获取所有生成的主路线、备选路线实例。
• 遍历所有路线实例，给每个路线的图层对象绑定点击事件，自定义popup内容后绑定到点击位置弹出即可。

// 提前在组件中声明地图和路由控件变量
private map: L.Map;
private routingControl: L.Routing.Control;

// 初始化路由控件（原有逻辑可以保留，只需要补充下面的事件监听部分）
initRoutingControl() {
  this.routingControl = L.Routing.control({
    waypoints: [
      L.latLng(39.9, 116.3), // 替换为实际起点坐标
      L.latLng(31.2, 121.4)  // 替换为实际终点坐标
    ],
    // 保留原有的其他配置，比如路线样式、备选路线数量等
    showAlternatives: true, // 开启备选路线
    altLineOptions: {
      styles: [{color: '#999', opacity: 0.7, weight: 6}]
    },
    lineOptions: {
      styles: [{color: '#2196F3', opacity: 0.8, weight: 7}]
    }
  }).addTo(this.map);

  // 核心：监听路线生成完成事件
  this.routingControl.on('routesfound', (event) => {
    const routeList = event.routes;
    routeList.forEach((route, idx) => {
      // 给路线绑定点击事件弹出popup
      route.line.on('click', (e) => {
        // 自定义popup内容，可自由调整字段和样式
        const content = `
          <div style="padding: 4px 8px;">
            <h5 style="margin: 0 0 8px 0;">${idx === 0 ? '主路线' : `备选路线${idx}`}</h5>
            <p style="margin: 4px 0;">总距离：${(route.summary.totalDistance / 1000).toFixed(2)} km</p>
            <p style="margin: 4px 0;">预计耗时：${Math.round(route.summary.totalTime / 60)} 分钟</p>
          </div>
        `;
        L.popup()
          .setLatLng(e.latlng)
          .setContent(content)
          .openOn(this.map);
      });

      // 可选：悬浮时显示tooltip提示
      route.line.bindTooltip('点击查看路线详情', {
        permanent: false,
        direction: 'top',
        offset: [0, -10]
      });
    });
  });
}

• 如果点击路线没有反应，可调整路线图层的层级避免被其他图层遮挡：在绑定事件后追加route.line.setZIndex(999)
• 如果需要切换路线时自动关闭上一个popup，可在组件内声明一个currentPopup变量存储当前打开的popup实例，每次新建popup前调用this.currentPopup?.close()关闭旧实例即可。
• 更多展示字段可从route对象中获取，比如分段导航指令可遍历route.instructions数组拼接后展示在popup内。

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