同时显示所有路线

Question

我有2分，即A和B

我正在 Google 地图上绘制位于 A 点和 B 点之间的所有交付点。

这里主要实现的目标是在地图上同时显示所有这些多条路线，缩放应该足以在地图上显示所有路线。

这是一个工作代码：

<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
<script type="text/javascript">

var map;

var origin = { lat: 40.6159134, lng: -74.0234863 };
var destination = { lat: 40.9132885, lng: -73.8340076 };

var locations = [
  { loadingLat: 40.8499301, loadingLng: -73.8449108, deliveryLat: 40.887934, deliveryLng: -73.828483 },
  { loadingLat: 40.7702993, loadingLng: -73.8792667, deliveryLat: 40.8246079, deliveryLng: -73.8713595 },
  { loadingLat: 40.7246827, loadingLng: -73.9347472, deliveryLat: 40.7567285, deliveryLng: -73.9142167 }
];


function addMarker(lat, lng, type, map) {

  var coordinates = { lat: lat, lng: lng };
  //var icon = 'AA.png';
  var infoWindowContent = '<div><b>Pickup Point:</b> '+type+'</div>';

  if(type == 'delivery'){

    //icon = 'BB.png';
    infoWindowContent = '<div><b>Delivery Point:</b> '+type+'</div>';
  }

  var marker = new google.maps.Marker({

    position: coordinates,
      map: map,
      animation:google.maps.Animation.DROP
  });

  var infowindow = new google.maps.InfoWindow({
      content: infoWindowContent
  });

  marker.addListener('click', function() {
      infowindow.open(map, marker);
  });

  //infowindw.open(map, marker); 
};

function initialize(){

  var map = new google.maps.Map(document.getElementById("map_canvas"),{

    //zoom: 14,
    center: { lat: origin.lat, lng: origin.lng }
  });

  function renderDirections(result) {

    var directionsRenderer = new google.maps.DirectionsRenderer;
    directionsRenderer.setOptions({suppressMarkers: true}); 
    directionsRenderer.setMap(map);
    directionsRenderer.setDirections(result);
  }

  var directionsService = new google.maps.DirectionsService;

  function requestDirections(loadingLat, loadingLng, deliveryLat, deliveryLng) {

    directionsService.route({

      origin: { lat: loadingLat, lng: loadingLng }, 
      destination: { lat: deliveryLat, lng: deliveryLng },
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, 
    function(result) {

      addMarker(loadingLat, loadingLng, 'pickup', map);
      addMarker(deliveryLat, deliveryLng, 'delivery', map);
      renderDirections(result);
    });
  }

  requestDirections(origin.lat, origin.lng, destination.lat, destination.lng);

  for(var i = 0; i < locations.length; i++){

    requestDirections(locations[i].loadingLat, locations[i].loadingLng, locations[i].deliveryLat, locations[i].deliveryLng);
  }
}


</script>

</head>

<body onLoad="initialize();">
<div id="map_canvas" style="width:1000px; height: 900px; margin:auto; background-color: #09F;"></div>
</body>
</html>

这里唯一的问题是地图缩放是完全随机的，它不会同时显示所有路线。

Answer 1

DirectionsRenderer 自动缩放地图以适应边界。这就是导致您看到的 "random" 缩放行为的原因。路线服务是异步的，地图会缩放到最后呈现的一张，不会总是相同的。

如果您正在发出多个路线请求，并且希望最终结果显示所有路线，请将地图缩放到路线边界的并集。

function renderDirections(result) {
  var directionsRenderer = new google.maps.DirectionsRenderer;
  directionsRenderer.setOptions({
    suppressMarkers: true, 
    preserveViewport: true  // <============================== prevent the "auto" zoom
  }); 
  directionsRenderer.setMap(map);
  directionsRenderer.setDirections(result);
  // calculate the union of bounds
  if (bounds.isEmpty()) bounds=result.routes[0].bounds;
  else bounds.union(result.routes[0].bounds);
  map.fitBounds(bounds); // zoom the map to fit the union of the bounds
}

proof of concept fiddle

代码片段：

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map_canvas {
  height: 100%;
  background-color: #09F;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initialize"></script>
<script type="text/javascript">
  var map;
  var bounds;

  var origin = { lat: 40.6159134, lng: -74.0234863 };
  var destination = { lat: 40.9132885, lng: -73.8340076 };

  var locations = [
    {loadingLat: 40.8499301, loadingLng: -73.8449108, deliveryLat: 40.887934, deliveryLng: -73.828483 },
    {loadingLat: 40.7702993, loadingLng: -73.8792667, deliveryLat: 40.8246079, deliveryLng: -73.8713595 },
    {loadingLat: 40.7246827, loadingLng: -73.9347472, deliveryLat: 40.7567285, deliveryLng: -73.9142167 }
  ];

  function addMarker(lat, lng, type, map) {
    var coordinates = {
      lat: lat,
      lng: lng
    };
    var infoWindowContent = '<div><b>Pickup Point:</b> ' + type + '</div>';
    if (type == 'delivery') {
      infoWindowContent = '<div><b>Delivery Point:</b> ' + type + '</div>';
    }
    var marker = new google.maps.Marker({
      position: coordinates,
      map: map,
      animation: google.maps.Animation.DROP
    });
    var infowindow = new google.maps.InfoWindow({
      content: infoWindowContent
    });
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  };

  function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      center: {
        lat: origin.lat,
        lng: origin.lng
      }
    });
    bounds = new google.maps.LatLngBounds();

    function renderDirections(result) {
      var directionsRenderer = new google.maps.DirectionsRenderer;
      directionsRenderer.setOptions({
        suppressMarkers: true,
        preserveViewport: true
      });
      directionsRenderer.setMap(map);
      directionsRenderer.setDirections(result);
      if (bounds.isEmpty()) bounds = result.routes[0].bounds;
      else bounds.union(result.routes[0].bounds);
      map.fitBounds(bounds);
    }

    var directionsService = new google.maps.DirectionsService();

    function requestDirections(loadingLat, loadingLng, deliveryLat, deliveryLng) {
      directionsService.route({
          origin: {
            lat: loadingLat,
            lng: loadingLng
          },
          destination: {
            lat: deliveryLat,
            lng: deliveryLng
          },
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        },
        function(result) {
          addMarker(loadingLat, loadingLng, 'pickup', map);
          addMarker(deliveryLat, deliveryLng, 'delivery', map);
          renderDirections(result);
        });
    }
    requestDirections(origin.lat, origin.lng, destination.lat, destination.lng);
    for (var i = 0; i < locations.length; i++) {
      requestDirections(locations[i].loadingLat, locations[i].loadingLng, locations[i].deliveryLat, locations[i].deliveryLng);
    }
  }
</script>
<div id="map_canvas"></div>

同时显示所有路线

Show all the routes at the same time

javascript

google-maps

google-maps-api-3