javascript - 方向航点未在 Google map 上显示所有航点

Question

我正在做实时跟踪网站，首先，我已经得到了方向的起点和目的地。在这两点之间，我在 map 上显示了大约 56 个航路点。我使用的是免费计划，据我所知，只有 23 个航点(包括出发地和目的地)可用于单个请求，因此我将 56 个航点分成 3 部分并使其请求批量API(3个请求)。基本上所有内容都显示在 map 上，但只有方向显示的最后一个响应显示在 map 上。如何合并从第一个请求到最后一个请求的所有航点？感谢任何帮助。谢谢。

这是我的代码的一部分:

var waypts = [];
var gaps = newIncLength = 21;
var directionsService;
var directionsDisplay;
var passedData = {};
var timeout = 0;
var orig = data[0];
var destine = data[data.length - 1];

function initMap() {

   directionsService = new google.maps.DirectionsService;
   directionsDisplay = new google.maps.DirectionsRenderer;
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: {
         lat: 41.85,
         lng: -87.65
      }
   });
   directionsDisplay.setMap(map);
   calculatewaypoint();
}


function calculatewaypoint() {

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

    waypts.push({
        location: parseFloat(data[i].lat) + ',' + parseFloat(data[i].long),
        stopover: false
    });

    if (data.length >= 21) {

        if (i == newIncLength) {

            newIncLength = newIncLength + gaps; 

            (function(i, passedData, waypts, origin, dest) {

                var id = '';
                id = drawingRoute(passedData, timeout, waypts, origin, dest);
                timeout = timeout + 1000;


            })(i, passedData, waypts, waypts[0], waypts[waypts.length - 1]);
            waypts = [];

        }            

        if (i == (data.length - 1)) {            

            (function(i, passedData, waypts, origin, dest) {

                var id = '';
                id = drawingRoute(passedData, timeout, waypts, origin, dest);
                timeout = timeout + 1000;


            })(i, passedData, waypts, waypts[0], waypts[waypts.length - 1]);
            waypts = [];
        }
    }
  }
}


function drawingRoute(passedData, timeout, wayptss, origin, dest) {

   setTimeout(function() {
      directionsService.route({
         origin: parseFloat( orig.lat ) + ',' + parseFloat( orig.long ) ,
         destination: parseFloat( destine.lat ) + ',' + parseFloat( destine.long ),
         waypoints: wayptss,
         optimizeWaypoints: false,
         travelMode: 'DRIVING'
     }, function(response, status) {
         console.log(response)
         if (status === 'OK') {
             directionsDisplay.setDirections(response);
         }
     })
   }, timeout);
}

这里正在工作 DEMO

Answer 1

您仅使用一个DirectionsRenderer。每次从 DirectionsService 返回结果时，它都会覆盖上一个结果。

directionsService.route({
  origin: parseFloat(orig.lat) + ',' + parseFloat(orig.long),
  destination: parseFloat(destine.lat) + ',' + parseFloat(destine.long),
  waypoints: wayptss,
  optimizeWaypoints: false,
  travelMode: 'DRIVING'
}, function(response, status) {
  console.log(response)
  if (status === 'OK') {
    // use a new DirectionsDisplay for each response
    var directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport: true});
    directionsDisplay.setMap(map);
    directionsDisplay.setDirections(response);
    // combine the resulting bounds
    bounds.union(response.routes[0].bounds);
    // zoom the map to show the whole route
    map.fitBounds(bounds);
  }
})

proof of concept fiddle

代码片段:(请注意，如果没有 key ，这将无法工作，因为它不允许无 key 访问 23 个航路点)

var waypts = [];
var gaps = newIncLength = 21;
var directionsService;
var directionsDisplay;
var passedData = {};
var timeout = 0;
var bounds;
var map;

function initMap() {
  bounds = new google.maps.LatLngBounds();
  directionsService = new google.maps.DirectionsService;
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  calculatewaypoint();
}


function calculatewaypoint() {
  for (var i = 0; i < data.length; i++) {
    waypts.push({
      location: parseFloat(data[i].lat) + ',' + parseFloat(data[i].long),
      stopover: false
    });
    if (data.length >= 21) {
      if (i == newIncLength) {
        newIncLength = newIncLength + gaps;
        (function(i, passedData, waypts, origin, dest) {
          var id = '';
          id = drawingRoute(passedData, timeout, waypts, origin, dest);
          timeout = timeout + 1000;
        })(i, passedData, waypts, waypts[0], waypts[waypts.length - 1]);
        waypts = [];
      }
      if (i == (data.length - 1)) {
        (function(i, passedData, waypts, origin, dest) {
          var id = '';
          id = drawingRoute(passedData, timeout, waypts, origin, dest);
          timeout = timeout + 1000;
        })(i, passedData, waypts, waypts[0], waypts[waypts.length - 1]);
        waypts = [];
      }
    }
  }
}

function drawingRoute(passedData, timeout, wayptss, origin, dest) {
  setTimeout(function() {
    directionsService.route({
      origin: parseFloat(orig.lat) + ',' + parseFloat(orig.long),
      destination: parseFloat(destine.lat) + ',' + parseFloat(destine.long),
      waypoints: wayptss,
      optimizeWaypoints: false,
      travelMode: 'DRIVING'
    }, function(response, status) {
      console.log(response)
      if (status === 'OK') {
        var directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport: true});
        directionsDisplay.setMap(map);
        directionsDisplay.setDirections(response);
        bounds.union(response.routes[0].bounds);
        map.fitBounds(bounds);
      }
    })
  }, timeout);
}

var data = [{
  lat: "4.593457",
  long: "101.073403",
  speed: "13.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.594472",
  long: "101.070327",
  speed: "41.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.595615",
  long: "101.069935",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.599033",
  long: "101.070342",
  speed: "44.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.602507",
  long: "101.068578",
  speed: "36.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.605725",
  long: "101.065465",
  speed: "42.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.607355",
  long: "101.062868",
  speed: "31.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.608005",
  long: "101.062478",
  speed: "15.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.609612",
  long: "101.059258",
  speed: "43.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.611360",
  long: "101.056063",
  speed: "20.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.614843",
  long: "101.057283",
  speed: "36.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.619595",
  long: "101.058590",
  speed: "33.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.619595",
  long: "101.058590",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.621348",
  long: "101.059392",
  speed: "44.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.626958",
  long: "101.060415",
  speed: "40.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.632102",
  long: "101.062317",
  speed: "49.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.636963",
  long: "101.063575",
  speed: "26.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.639793",
  long: "101.064022",
  speed: "43.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.643833",
  long: "101.067567",
  speed: "56.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.648288",
  long: "101.069325",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.651272",
  long: "101.069387",
  speed: "50.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.657333",
  long: "101.070242",
  speed: "52.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.660700",
  long: "101.070642",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.664840",
  long: "101.071095",
  speed: "28.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.666290",
  long: "101.071355",
  speed: "34.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.670790",
  long: "101.072095",
  speed: "12.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.671062",
  long: "101.072240",
  speed: "26.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.670800",
  long: "101.073272",
  speed: "12.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.669503",
  long: "101.072973",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.669357",
  long: "101.073733",
  speed: "16.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.668990",
  long: "101.072772",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.669168",
  long: "101.072487",
  speed: "12.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.670913",
  long: "101.073303",
  speed: "11.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.670325",
  long: "101.073012",
  speed: "17.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.670325",
  long: "101.073012",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.669390",
  long: "101.073120",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.672258",
  long: "101.072702",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.640412",
  long: "101.064677",
  speed: "50.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.635753",
  long: "101.063395",
  speed: "42.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.631692",
  long: "101.062358",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.627767",
  long: "101.060885",
  speed: "53.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.622295",
  long: "101.060833",
  speed: "14.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.619192",
  long: "101.058632",
  speed: "43.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.614193",
  long: "101.057340",
  speed: "40.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.610585",
  long: "101.057753",
  speed: "32.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.608682",
  long: "101.061022",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.607688",
  long: "101.062452",
  speed: "18.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.607002",
  long: "101.063557",
  speed: "36.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.604033",
  long: "101.067332",
  speed: "22.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.601875",
  long: "101.069307",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.600803",
  long: "101.070063",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.597825",
  long: "101.070582",
  speed: "40.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.597825",
  long: "101.070582",
  speed: "0.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.596133",
  long: "101.070298",
  speed: "35.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.593590",
  long: "101.072668",
  speed: "14.00",
  pat_date: "2016-11-02"
}, {
  lat: "4.593590",
  long: "101.072668",
  speed: "0.00",
  pat_date: "2016-11-02"
}];
var orig = data[0];
var destine = data[data.length - 1];

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

#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>