2

我正在使用方向服务通过谷歌地图 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.
            }});
4

1 回答 1

0

这个想法是您必须遍历路线的每一段，然后遍历该段中的每一步，并呈现您自己的 HTML 来表示它。请参阅以下代码（假设您已定义map、directionsDisplay、 和directionsService和 a 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 回答