javascript - Google Maps指示mvcobject获得单个步骤

我正在使用DirectionsService通过Google Maps JavaScript API获取路线。问题是我想获取单个步骤，但仍将它们作为mvc对象的一部分，因此当您单击它们时，它们将作为默认值呈现在地图上

directionsDisplay.setDirections(response);

做。
一些代码：

var directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(map);

var request = {
        origin : a,
        destination : b,
        travelMode : google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {

    if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
          //Instead of setting directions to a panel i want to
          //set just one to a panel and yet have it link to the
          //map like the above does.
            }});

最佳答案

这个想法是，您必须遍历路线的每个分支，然后遍历该分支的每个步骤，并呈现自己的HTML来表示它。请参见以下代码（假设您已定义map，directionsDisplay和directionsService，并且定义了request）：

directionsService.route(request, function(response, status) {
  // Make sure the directions request was valid
  if (status == google.maps.DirectionsStatus.OK) {
    // Give the response to the directions display
    directionsDisplay.setDirections(response);

    // Display the route on the map
    directionsDisplay.setMap(map);

    // Grab the result from the routes
    var routeResult = response.routes[0];

    // Iterate over each leg of the route
    routeResult.legs.forEach(function(leg) {
      // Build HTML for each step
      var stepHTML = '';
      leg.steps.forEach(function(step) {
        stepHTML += '<div class="directionStep">'+
                  '<div>'+step.instructions+'</div>'+
                  '<div class="grey">'+step.distance.text+' ('+step.duration.text+')'+'</div>'+
                '</div>';
      });

      // Put the step HTML somewhere
      $('.steps').append(stepHTML);
    });
  }
});

然后，听每个步骤的点击，并做您需要做的一切作为回应。