如何找到 google 地图路线的边界?

How can I find the bounds of a google map route?

我正在使用我存储的数据对象在 Google 地图中创建路线:

        routeData = {
            origin: 'address A',
            destination: 'address B',
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            waypoints: [obj, obj, obj],
            optimizeWaypoints: false
        };

因为这张地图上我还有其他物体,所以我设置了optimizeWaypoints: false

然后我用这段代码绘制路线:

        // Instantiate a directions service.
        var directionsService = new google.maps.DirectionsService;

        // Create a renderer for directions and bind it to the map.
        directionsDisplay = new google.maps.DirectionsRenderer({
            preserveViewport: true,
            suppressMarkers: true,
            map: map
        });

        directionsService.route(routeData, function(result, status) {
            directionsDisplay.setDirections(result);
        });

directionsDisplay是一个全局变量。

在地图上绘制完所有对象后,我遍历所有对象以获得边界。

fitMapObjectBounds: function(mapData){
    var bounds          = new google.maps.LatLngBounds();
    var marker, circle, route  = null;
    var fitTheBounds    = false;

    // Marker
    $(mapData.markers).each(function(key, value){
        marker = new google.maps.Marker(value);
        bounds.extend(marker.getPosition());
        fitTheBounds = true;
    });

    // Circles
    $(mapData.circles).each(function(key, value){
        circle = new google.maps.Circle(value);
        bounds.union(circle.getBounds());
        fitTheBounds = true;
    });

    if(fitTheBounds == true) {
        map.fitBounds(bounds);
    }

}

我的问题是,如何获取路线的边界?我真的找不到很好的例子。

更新
所以我在我的 fitMapObjectBounds 函数中添加了这段代码,但它不起作用:

directionsService = new google.maps.DirectionsService;
directionsService.route(mapData.routeStreet, function(result, status) {
    directionsDisplay.setDirections(result);
    bounds.union(directionsDisplay.getDirections().routes[0].bounds);
});

默认显示的路由边界(第一个返回)是

directionsDisplay.getDirections().routes[0].bounds

documentation

代码片段:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var routeData = {
    origin: 'New York, NY',
    destination: 'Philadelphia, PA',
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    waypoints: [],
    optimizeWaypoints: false
  };
  // Instantiate a directions service.
  var directionsService = new google.maps.DirectionsService;

  // Create a renderer for directions and bind it to the map.
  directionsDisplay = new google.maps.DirectionsRenderer({
    preserveViewport: true,
    suppressMarkers: true,
    map: map
  });

  directionsService.route(routeData, function(result, status) {
    directionsDisplay.setDirections(result);
    map.fitBounds(directionsDisplay.getDirections().routes[0].bounds);
  });
  // fitObjectBounds()
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>