地图两点标记间未绘制路线：模块导入与代码位置咨询

先给你明确的结论：

• 是的，必须导入/加载路线相关的模块/库，这是很多人容易忽略的关键前提；
• Directions代码的位置不是必须放在Autocomplete外部，核心是要选对执行时机——得等你拿到起点和终点的有效坐标后再触发路线计算。

1. 关于路线模块的导入/加载 #

Google Maps的Directions服务并不包含在基础地图库中，你需要确保两处配置正确：

• 加载Google Maps脚本时包含directions库：
  在你的index.html（或加载地图脚本的位置），必须在API请求里加上&libraries=directions参数，比如：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=places,directions"></script>
  

  （如果用了Autocomplete，places库也得加上，你应该已经配置过了）

• Angular组件中引入必要的服务：
  如果你用的是@angular/google-maps，要在组件里导入并注入Directions相关的服务：

  import { MapDirectionsService, MapDirectionsRenderer } from '@angular/google-maps';
  // 还要通过ViewChild获取地图和路线渲染器的实例
  @ViewChild(MapDirectionsRenderer) directionsRenderer!: MapDirectionsRenderer;
  

2. 关于Directions代码的位置 #

你完全可以把Directions的计算逻辑放在Autocomplete的回调内部——甚至这是更合理的做法！
比如当用户通过Autocomplete选择了终点后，再触发路线计算，这样能确保你已经拿到了终点的地理坐标（place.geometry.location）。

举个实际的逻辑示例：

// 假设这是你Autocomplete的选择事件回调
onDestinationSelected(place: google.maps.places.PlaceResult) {
  // 先从选中的地点里提取坐标
  const destination = {
    lat: place.geometry?.location?.lat() || 0,
    lng: place.geometry?.location?.lng() || 0
  };

  // 拿到有效坐标后再调用路线计算
  this.calculateRoute(this.origin, destination);
}

// 路线计算函数
private calculateRoute(origin: google.maps.LatLngLiteral, destination: google.maps.LatLngLiteral) {
  const request: google.maps.DirectionsRequest = {
    origin,
    destination,
    travelMode: google.maps.TravelMode.DRIVING
  };

  this.directionsService.route(request).subscribe(res => {
    this.directionsRenderer.setDirections(res.result);
  });
}

如果之前你把calculateRoute放在Autocomplete外部，很大概率是因为还没拿到有效的终点坐标就执行了路线请求，导致服务返回空结果，自然不会绘制路线。

额外检查点 #

• 确保模板里已经添加了<map-directions-renderer>组件，并且嵌套在<google-map>标签内部：

  <google-map [center]="origin" [zoom]="12">
    <map-directions-renderer></map-directions-renderer>
  </google-map>
  

• 仔细检查控制台有没有隐藏的错误（比如API权限问题、坐标为空的报错），有时候控制台的“正常输出”只是基础日志，可能有关键错误被你忽略了。

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