同时显示所有路线

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自动缩放地图以适应边界。 这就是导致您看到的“随机”缩放行为的原因。 路线服务是异步的，地图左缩放到最后渲染的地图，这并不总是相同的。

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

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
}

概念证明小提琴

代码片段：

 /* 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>

同时显示所有路线

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-05 01:47:50

同时显示所有路线

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-05 01:47:50

解决方案1
1 已采纳 2020-02-05 01:47:50