Google지도 길 찾기 mvcobject는 개별 단계를 얻습니다.

Question

DirectionsService를 사용하여 Google지도 javascript API를 통해 길 찾기를하고 있습니다. 문제는 당신이 그들에 클릭 할 때 그래서 그들은

directionsDisplay.setDirections(response); 

가하는 기본값으로지도 렌더링 개별 단계를 얻고 아직이 MVC 객체의 일부가 갖고 싶어한다는 것입니다. 일부 코드 :

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

아이디어는 다음 다리의 각 단계에 걸쳐 경로의 각 다리를 반복하고 표현하기 위해 자신의 HTML 렌더링 있어야합니다. 개별 단계의 클릭을 듣고 당신은 응답 할 필요가 무엇이든, 그 다음

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

: (당신이 map, directionsDisplay 및 directionsService 및 정의 request 있다고 가정) 다음 코드를 참조하십시오.