使用Directions API仅显示航点

loading...


-1

我正在使用带有Waypoint的Directions API,as this doc,用于出租车服务 .

我需要起始地址和结束地址来计算驾驶成本,但我只需要显示航点的 Map .

我管理如何检索我想要的信息,但我不知道如何仅使用路标显示 Map ,而不知道如何使用起点和终点地址 .

我举个例子 . 我的出租车在帝国大厦,所以这些是我的开始和结束地址,我的客户想要从华盛顿广场到纽约法拉盛梅多斯 .

计算来自A> B> C,来自B> C的信息,但是显示是A> B> C> D,我只想要B> C

除了检索信息之外,我使用与文档完全相同的代码 . 我知道我必须管理directionsDisplay,但我无法弄清楚如何 .

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 46.166213, lng: -1.3791688}
  });
  directionsDisplay.setMap(map);

  document.getElementById('calculate').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });

}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  $('#waypoints input').each(function(e){
    waypts.push({
      location: $(this).val(),
      stopover: true
    });
  });
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: false,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
    /* This is the display I need to change ! */
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      $('.show-result').show();
      $('.start_address').html(route.legs[1].start_address);
      $('.end_address').html(route.legs[1].end_address);
      $('.distance_qty').html(route.legs[1].distance.text);
      $('.time_spend').html(route.legs[1].duration.text);
      var money_spend = (route.legs[0].distance.value + route.legs[1].distance.value)/1000 * 1.5;
      $('.money_amount').html(money_spend.toFixed(2));
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        console.log(route.legs[i]);
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
<div id="map"></div>

loading...

0回答

No Data

评论

暂时没有评论!