2

私は、Google マップの JavaScript API を介してルート案内を取得するために、directionsService を使用しています。問題は、個々のステップを取得し、それらを 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.
            }});
4

1 に答える 1

0

アイデアは、ルートの各レグを反復し、次にレグの各ステップを反復し、それを表す独自の 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);
    });
  }
});

次に、個々のステップのクリックを聞いて、それに応じて必要なことを行います。

于 2012-11-19T19:58:32.970 に答える