使用agm-direction获取两点路径距离（非直线）遇阻，求技术支持

1. 设置TravelMode #

AGM Direction组件支持通过[travelMode]输入属性指定出行模式，可选值包括'DRIVING'、'WALKING'、'BICYCLING'、'TRANSIT'，直接在模板的<agm-direction>标签中添加该属性即可：

修改后的HTML模板示例：

<div class="col-md-12">
  <h4>Teslim Alınacak Konum<span role="button" (click)="modal.dismiss('');" style="float: right;" class="fas fa-times fs-20"></span></h4>
  <agm-map [zoom]="12" style="height:500px" [latitude]="(mapAlinacakX+mapEdilecekX)/2" [longitude]="(mapAlinacakY+mapEdilecekY)/2">
    <!-- 第一个路线，设置为驾车模式 -->
    <agm-direction 
      [origin]="anaMerkez" 
      [destination]="alimYeri"
      [renderOptions]="renderOptions" 
      [markerOptions]="markerOptions"
      [travelMode]="'DRIVING'"
      (directionsChanged)="onDirectionsChanged($event, 'route1')"
    >
    </agm-direction>
    <!-- 第二个路线，设置为步行模式 -->
    <agm-direction 
      [origin]="teslimYeri" 
      [destination]="anaMerkez"
      [renderOptions]="renderOptions1" 
      [markerOptions]="markerOptions1"
      [travelMode]="'WALKING'"
      (directionsChanged)="onDirectionsChanged($event, 'route2')"
    >
    </agm-direction>
  </agm-map>
</div>

2. 获取路径实际距离（非直线） #

利用AGM Direction的directionsChanged输出事件，当Google Maps完成路线计算后，会返回包含路线详情的google.maps.DirectionsResult对象，从中可以提取路径的距离信息：

在组件的TypeScript代码中添加事件处理函数：

// 存储不同路线的距离数据
routeDistances: { [key: string]: { text: string, value: number } } = {};

// 处理路线计算完成事件
onDirectionsChanged(event: google.maps.DirectionsResult, routeKey: string) {
  if (event.routes.length > 0 && event.routes[0].legs.length > 0) {
    const firstLeg = event.routes[0].legs[0];
    this.routeDistances[routeKey] = {
      text: firstLeg.distance.text, // 格式化距离文本（如"5.2 km"）
      value: firstLeg.distance.value // 距离数值（单位：米）
    };
    // 可在此处使用距离数据，比如渲染到页面或进行计算
    console.log(`${routeKey} 路径距离:`, this.routeDistances[routeKey]);
  }
}

补充说明 #

• 确保AGM Direction依赖包为最新版本，避免因版本迭代导致属性不兼容；
• travelMode的取值需严格匹配Google Maps的TravelMode枚举，字符串必须大写；
• 若路线包含多个路段（legs），需遍历legs数组将各路段距离数值相加，得到总路径距离。

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