Fatal编程技术网

Javascript 同时显示所有路线

javascript google-maps google-maps-api-3

Javascript 同时显示所有路线,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我得了2分，即A和B 我正在谷歌地图上绘制所有这些交付点，它位于A点和B点之间 这里要实现的主要目标是在地图上同时显示所有这些多条路线，缩放应足以显示地图上的所有路线 以下是工作代码： <!DOCTYPE html> <html> <head> <title>Google Map</title> <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&am

我得了2分，即A和B

我正在谷歌地图上绘制所有这些交付点，它位于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>
这里唯一的问题是地图缩放是完全随机的，它不会同时显示所有路线。

方向渲染器会自动缩放地图以适应边界。这就是导致您看到的随机缩放行为的原因。方向服务是异步的，地图将被左缩放到最后一个渲染的地图，而最后一个渲染的地图并不总是相同的

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

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
}
var映射； var界； var来源={lat:40.6159134，液化天然气：-74.0234863}； var目的地={lat:40.9132885，液化天然气：-73.8340076}； 变量位置=[ {装货板条：40.8499301，装货LNG:-73.8449108，交货板条：40.887934，交货LNG:-73.828483}， {装货板条：40.7702993，装货LNG:-73.8792667，交货板条：40.8246079，交货LNG:-73.8713595}， {装货栏位：40.7246827，装货栏位：-73.9347472，交货栏位：40.7567285，交货栏位：-73.9142167} ]; 函数addMarkerlat，lng，类型，映射{ 变量坐标={ 拉特：拉特， 液化天然气：液化天然气 }; var infoWindowContent='拾取点：'+类型+； 如果类型==‘交货’{ infoWindowContent='交付点：'+类型+； } var marker=new google.maps.marker{ 位置：坐标， 地图：地图， 动画：google.maps.animation.DROP }; var infowindow=new google.maps.infowindow{ 内容：infoWindowContent }; marker.addListener'click'，函数{ infowindow.openmap，标记； }; }; 函数初始化{ var map=new google.maps.Mapdocument.getElementByIdmap\u画布{ 中心：{ lat:origin.lat， lng:origin.lng } }; 边界=新的google.maps.LatLngBounds； 函数renderDirectionsresult{ var directionsrender=new google.maps.directionsrender； directionsRenderer.setOptions{ 对,， 保存视口：true }; directionsRenderer.setMapmap； directionsRenderer.setDirectionsresult； 如果bounds.isEmpty bounds=result.routes[0].bounds； else bounds.unionresult.routes[0].bounds； map.fitbundsbounds； } var directionsService=新的google.maps.directionsService； 函数请求方向LoadingLat，loadingLng，deliveryLat，deliveryLng{ 方向服务.路线{ 来源：{ lat：加载lat， 液化天然气：装载液化天然气 }, 目的地：{ lat:deliveryLat， 液化天然气：交付液化天然气 }, travelMode:google.maps.Directions travelMode.DRIVING }, 函数结果{ addMarkerloadingLat，loadingLng，“皮卡”，地图； addMarkerdeliveryLat，deliveryLng，“delivery”，地图； 渲染方向结果； }; } 请求方向origin.lat、origin.lng、destination.lat、destination.lng； 对于变量i=0；i