如何从Google Maps JS DirectionsResult提取经纬度坐标（无需DirectionsRenderer）

没问题！要绕过DirectionsRenderer自己提取路线的所有经纬度坐标，核心就是逐层遍历API返回的嵌套结构——毕竟DirectionsResult的路线数据是按**路线（routes）→ 路段（legs）→ 步骤（steps）→ 路径点（path）**的层级组织的。下面给你一步步拆解实现：

1. 理解数据层级结构 #

首先得搞清楚DirectionsResult的嵌套逻辑：

• 一个查询结果可能包含多条routes（通常默认返回最优路线，所以数组长度为1）
• 每条route下的legs对应路线的分段（比如从起点到第一个途经点是一个leg，途经点到终点是另一个）
• 每个leg由多个steps组成（就是导航里的每一步，比如“左转进入XX路”）
• 每个step的path属性就是该段路线的所有经纬度点集合，每个元素是Google Maps的LatLng对象

2. 完整提取所有坐标的代码示例 #

下面是一个通用函数，可以把所有路径点提取成普通的JSON格式数组（方便后续存储或自定义绘制）：

function extractAllCoordinates(directionsResult) {
  const allCoordinates = [];

  // 遍历所有路线（通常只有一条）
  directionsResult.routes.forEach(route => {
    // 遍历每个路段
    route.legs.forEach(leg => {
      // 遍历每个导航步骤
      leg.steps.forEach(step => {
        // 提取当前步骤的所有路径点，转成普通对象
        step.path.forEach(latLng => {
          allCoordinates.push({
            lat: latLng.lat(),
            lng: latLng.lng()
          });
        });
      });
    });
  });

  return allCoordinates;
}

使用方式 #

你可以在Directions API的请求回调里直接调用这个函数，比如：

const directionsService = new google.maps.DirectionsService();

directionsService.route({
  origin: "New York, NY",
  destination: "Los Angeles, CA",
  travelMode: google.maps.TravelMode.DRIVING
}, (result, status) => {
  if (status === google.maps.DirectionsStatus.OK) {
    // 提取所有坐标
    const coordinates = extractAllCoordinates(result);
    console.log("所有经纬度坐标：", coordinates);
    // 这里就可以用这些坐标自定义绘制路线了，比如用Polyline
  } else {
    console.error("路线查询失败：", status);
  }
});

3. 可选优化：简化提取或去重 #

如果你只需要路线的概览轮廓（不需要每个步骤的详细路径点），可以直接用route.overview_path，这是整条路线的简化坐标数组，效率更高：

function extractOverviewCoordinates(directionsResult) {
  if (!directionsResult.routes.length) return [];
  // 取第一条路线的概览路径
  const overviewPath = directionsResult.routes[0].overview_path;
  return overviewPath.map(latLng => ({
    lat: latLng.lat(),
    lng: latLng.lng()
  }));
}

另外，如果你想去除连续重复的坐标点（避免冗余数据），可以加个简单的去重逻辑：

function extractUniqueCoordinates(directionsResult) {
  const allCoordinates = [];
  let lastCoordinate = null;

  directionsResult.routes.forEach(route => {
    route.legs.forEach(leg => {
      leg.steps.forEach(step => {
        step.path.forEach(latLng => {
          const currentCoord = { lat: latLng.lat(), lng: latLng.lng() };
          // 对比当前坐标与上一个，不同才添加
          if (!lastCoordinate || 
              currentCoord.lat !== lastCoordinate.lat || 
              currentCoord.lng !== lastCoordinate.lng) {
            allCoordinates.push(currentCoord);
            lastCoordinate = currentCoord;
          }
        });
      });
    });
  });

  return allCoordinates;
}

注意事项 #

• 记得LatLng对象需要调用lat()和lng()方法才能获取到数值型的经纬度，直接使用对象本身是Google的内置类型，无法直接序列化或用于自定义绘制
• 确保你的API请求已经获取到了OK状态的结果，再调用提取函数

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