Google Maps JS - 只渲染一条路线的一条路段

Question

我正在开发一个带有 Google 地图 API 的 JS 网络应用程序。

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

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

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

我的 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();
});

Answer 1

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


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

代码片段：

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 Maps JS - Render only one leg from a route

javascript

api

maps

render

google-maps-api-3