如何在Google Directions路线中解码overview_polyline并绘制折线？

要解码Google Maps Directions返回的overview_polyline，你需要注意两个核心要点：确保加载了geometry扩展库，以及正确调用解码方法并传入对应参数。

1. 先确认加载Maps API时包含geometry库 #

Google Maps的路径解码功能属于geometry扩展库，所以加载API脚本时必须加上&libraries=geometry参数，否则google.maps.geometry.decodePath方法会无法调用。示例：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=geometry"></script>

2. 修正你的代码逻辑 #

你当前的代码存在两个问题：

• 直接传入了整个overview_polyline对象，但decodePath需要的是对象内部的points属性（这才是编码后的字符串）
• 没有接收decodePath的返回值，这个返回值才是解码后的坐标数组

修改后的完整代码如下：

function calcRoute() {
  var waypts = [
    { location: "Sao José dos campos,SP", stopover: true },
  ];
  directionsService
    .route({
      origin: "Rio de Janeiro, RJ",
      destination: "São paulo, SP",
      waypoints: waypts,
      travelMode: google.maps.TravelMode.DRIVING,
      provideRouteAlternatives: true,
    })
    .then((response) => {
      console.log({ response });
      directionsRenderer.setDirections(response);
      var rotaFeita = response.routes[0].overview_polyline;
      // 传入points属性，接收解码后的LatLng数组
      var decodedPath = google.maps.geometry.decodePath(rotaFeita.points);
      // 打印解码后的坐标
      console.log("解码后的路径坐标：");
      decodedPath.forEach((latLng, index) => {
        console.log(`点${index+1}: 纬度${latLng.lat()}, 经度${latLng.lng()}`);
      });
    })
    .catch((err) => {
      console.log({ err });
    });
}

关键说明 #

• google.maps.geometry.decodePath(rotaFeita.points)：传入编码字符串后，会返回一个google.maps.LatLng对象数组
• 每个LatLng对象可以通过lat()和lng()方法分别获取纬度和经度值，你可以用这些坐标做后续处理，比如绘制自定义路线、计算路段距离等。

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