我正在进行实时跟踪网站，首先，我已经获得了方向的 origin 和 destination . 在这两点之间，我在 Map 上显示 56 waypoints . 据我所知，我正在使用免费计划，只有23个可用于单个请求的航路点（包括始发地和目的地），因此 i split up 56 waypoints into 3 parts 并使其按批次请求API（3请求） . 基本上一切都在 Map 上显示，但只有 Direction Display 的最后一个响应才会显示在 Map 上 . 如何组合从第一个请求到最后一个请求的所有航路点？感谢任何帮助 . 谢谢 .
Here is part of my code :
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
1 回答
您只使用一个
DirectionsRenderer. 每次从DirectionsService返回结果时，它都会覆盖最后一个 .proof of concept fiddle
code snippet: （请注意，这赢得了't work without a key, as it doesn' t允许使用无密钥访问的23个航路点）