Google Maps指示mvcobject获得单个步骤

Question

I am using directionsService to get Directions via the google maps javascript api. The issue is that I want to get individual steps and yet have them be part of the mvc object so when you click on them they render on the map as the default

directionsDisplay.setDirections(response); 

does. Some Code:

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.
            }});

Answer 1

The idea is you must iterate over each leg of the route, then over each step in the leg and render your own HTML to represent it. See the following code (assumes you have map , directionsDisplay , and directionsService , and a request defined):

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);
    });
  }
});

Then, listen to clicks on the individual steps and do whatever you need to in response.