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

Posted

技术标签:

【中文标题】Google Maps JS - 仅渲染路线的一条腿【英文标题】：Google Maps JS - Render only one leg from a route 【发布时间】：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，并提供默认值以显示路线。 【参考方案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>

【讨论】：

以上是关于Google Maps JS - 仅渲染路线的一条腿的主要内容，如果未能解决你的问题，请参考以下文章

使用路线渲染Google地图，如何传递路线道具？

如何在 Google Maps API 中的两个标记之间绘制路线？

指定航点时，Direction API 仅返回一条路线

Google Maps API (JS) 在航路点中使用 PlaceId 创建路线

Google Maps API V3 - 边界内最近的路线

Google Maps v2 - 用不同颜色绘制路线 - Android