如何监听Google地图路线服务的异步执行结果以执行后续代码？

你说得对，用Observable来封装Google的回调式API是完美的解决方案——它能帮你把异步操作转换成可订阅的流，让页面能精准监听服务的执行状态（成功/失败），再触发后续逻辑，完全避免公共变量带来的时序问题和数据不一致。

第一步：改造你的路线服务，封装成Observable #

把原来的回调逻辑包裹在Observable.create()里，当Google服务返回结果时，通过next传递数据，error传递失败状态，最后complete结束流：

import { Observable } from 'rxjs';

// 假设这是你的路线服务类
export class RouteService {
  private directionsService = new google.maps.DirectionsService();

  // 新增方法：返回Observable，接收route参数
  calculateRoute(route: google.maps.DirectionsRequest): Observable<number> {
    return new Observable((observer) => {
      this.directionsService.route(route, (data, status) => {
        if (status === 'OK') {
          // 成功时，提取duration.value并发送给订阅者
          const durationValue = data.routes[0].legs[0].duration.value;
          observer.next(durationValue);
          observer.complete();
        } else {
          // 失败时，发送错误信息
          observer.error(new Error(`路线计算失败：${status}`));
        }
      });
    });
  }
}

第二步：在页面组件中订阅Observable，控制后续逻辑 #

现在你可以在页面里调用服务的calculateRoute方法，通过subscribe来监听结果，只有当服务返回成功时，才执行你的本地变量修改和函数调用：

// 假设这是你的页面组件
export class MapPageComponent {
  isStarted = false;
  constructor(private routeService: RouteService) {}

  // 调用路线服务的方法
  startRouteCalculation(routeParams: google.maps.DirectionsRequest) {
    this.routeService.calculateRoute(routeParams)
      .subscribe({
        next: (durationValue) => {
          // 成功拿到结果后，执行后续逻辑
          this.isStarted = true;
          this.map.showPath();
          // 还可以把durationValue存到本地或者做其他处理
          this.storage.routeValue = durationValue;
        },
        error: (err) => {
          // 处理失败情况，比如提示用户
          console.error(err.message);
          // 这里可以添加失败后的逻辑，比如重置状态
          this.isStarted = false;
        }
      });
  }
}

为什么这比公共变量靠谱？ #

• 时序明确：只有当Google服务真正返回结果（成功/失败）时，才会触发next或error回调，完全避免了提前执行后续逻辑的问题。
• 状态可控：失败时能直接捕获错误，针对性处理，不会因为公共变量的延迟更新或错误数据导致逻辑混乱。
• 可复用性强：这个Observable封装的服务可以在任何页面调用，每个订阅都独立处理自己的后续逻辑，互不干扰。

如果你的项目里用了RxJS的其他操作符，还可以进一步扩展（比如添加timeout防止请求超时，或者retry重试失败请求），让整个服务更健壮。

内容的提问来源于stack exchange，提问作者Nikola Noxious Dimitrov