Google Maps JS - 仅渲染路线的一条腿答案

【问题标题】：Google Maps JS - Render only one leg from a routeGoogle Maps JS - 仅渲染路线的一条腿
【发布时间】：2021-01-19 04:04:07
【问题描述】：

我正在使用 Google Maps API 开发一个 JS webapp。

我必须计算从 A/D 到 B、B 到 C 和 C 到 A/D 的距离（请查看下一张图片）。

https://imgur.com/a/OiKJaXA

但是，在地图上，我只需要渲染第二条腿（legs[1]，B 到 C）。（查看图片了解更多信息）

https://imgur.com/a/zjQUu9h

如何隐藏路线的第一段和最后一段？当然，我可以做另一个请求，一个用于地图，一个用于计算，但我正在努力提高效率。

我的 JS：

 var mpos = "via Melzi deril 38 20154 Milano";
  var madd = $("#i_madd_v").val() + ', ' + $("#i_madd_n").val() + ', ' + $("#i_madd_c").val();
  var dadd = $("#i_dadd_v").val() + ', ' + $("#i_dadd_n").val() + ', ' + $("#i_dadd_c").val();

  console.log(madd);
  console.log(dadd);

  function initMap() {
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();

    var centro = new google.maps.LatLng(45.462861, 9.186453);
    var mapOptions = {
      zoom:11,
      center: centro,
      disableDefaultUI: true
    }
    map = new google.maps.Map(document.getElementById('mappa'), mapOptions);
    directionsRenderer.setMap(map);
    calcRoute(directionsService, directionsRenderer);
  }
  
  function calcRoute(directionsService, directionsRenderer) {

    var request = {
      origin:mpos,
      destination:mpos,
      waypoints: [
        { 
          location: madd,
          stopover: true
        },
        { 
          location: dadd,
          stopover: true
        },
      ],
      travelMode: 'DRIVING'
    };
    directionsService.route(request, function(response, status) {
      if (status == 'OK') {
        console.log(response);
        console.log(status);
        
        directionsRenderer.setDirections(response);
      }
    });
  }
  initMap();
});

【问题讨论】：

贴出的代码有语法错误（末尾多});）。请提供一个 minimal reproducible example 来证明您的问题，最好是 StackSnippet，并提供默认值以显示路线。

标签： javascript api google-maps-api-3 maps render

【解决方案1】：

如果您的路线总是有 3 条腿，并且您总是想删除第 1 条和最后一条，您可以在将路线服务的响应传递给路线渲染器之前修改它：


directionsService.route(request, function(response, status) {
  if (status == 'OK') {
    response.routes[0].legs.splice(0,1); // remove 1st leg
    response.routes[0].legs.splice(1,1); // remove last leg
    directionsRenderer.setDirections(response);
  } else alert("directions request failed:"+status);
});

proof of concept fiddle

代码 sn-p：

var mpos = "via Melzi deril 38 20154 Milano";
var madd = "Monza, IT";
var dadd = "Segrate, IT";

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();

  var centro = new google.maps.LatLng(45.462861, 9.186453);
  var mapOptions = {
    zoom: 11,
    center: centro,
    disableDefaultUI: true
  }
  map = new google.maps.Map(document.getElementById('mappa'), mapOptions);
  directionsRenderer.setMap(map);
  calcRoute(directionsService, directionsRenderer);
}

function calcRoute(directionsService, directionsRenderer) {

  var request = {
    origin: mpos,
    destination: mpos,
    waypoints: [{
        location: madd,
        stopover: true
      },
      {
        location: dadd,
        stopover: true
      },
    ],
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      response.routes[0].legs.splice(0, 1);
      response.routes[0].legs.splice(1, 1);
      directionsRenderer.setDirections(response);
    }
  });
}
initMap();

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#mappa {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=&v=weekly"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="mappa"></div>
</body>

</html>

【讨论】：