方向航點並未在Google地圖上顯示所有航點

我正在做現場跟蹤網站，首先，我已經爲方向origin和destination。在這兩點之間，我在地圖上顯示56 waypoints。據我所知，我使用的是免費計劃，只有23個航點（包括出發地和目的地）可用於單個請求，所以i split up 56 waypoints into 3 parts並通過批量請求API（3請求）。基本上所有東西都顯示在地圖上，但只有Direction Display在地圖上顯示的最後一個響應。我如何將從第一次請求到最後一次請求的所有路標合併在一起？讚賞任何幫助。謝謝。方向航點並未在Google地圖上顯示所有航點

這裏是我的代碼部分：

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

來源

2016-12-15 Norlihazmey Ghazali

您只使用一個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

代碼片段：（注意，這將不無鑰匙工作，因爲它不允許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.2", 
 
    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>

來源

2016-12-15 15:12:28 geocodezip

不錯，非常感謝！使用這個，如何從地圖中刪除路線和所有的路標。我使用按鈕單擊來發出請求，所以無論何時點擊按鈕，都應該用新方向更新地圖 –

這是另一個問題（可能是重複的），您需要保留對所有DirectionsRenderer的引用並將它們從地圖中移除。如果這回答您的原始問題，請[接受它]（http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work） – geocodezip

是的，'你需要保持對所有的引用DirectionsRenderers並從地圖中刪除它們，這一個幫助。謝謝 –

方向航點並未在Google地圖上顯示所有航點

回答

相關問題