如何獲取Gmaps.js在動態標記javascript之間繪制路線？

Question

我正在使用Gmaps.js顯示從數據庫中提取的坐標，並且試圖將所有標記連接在一起以形成一條路線。 但是我唯一能找到的就是下面的代碼。

我如何修改它以在第一個和第二個標記以及第二個和第三個標記之間繪制路線？

map.drawRoute({
  origin: [-12.044012922866312, -77.02470665341184],
  destination: [-12.090814532191756, -77.02271108990476],
  travelMode: 'driving',
  strokeColor: '#783bf2',
  strokeOpacity: 0.6,
  strokeWeight: 6
});

這是我嘗試過的：

var latlng = new google.maps.LatLng(lat, longit);
bounds.push(latlng);

/* Add Marker */
map.addMarker({
  lat: lat,
  lng: longit,
  title: 'title',
});

$(latlng).each(function( index, element ) {
  map.drawRoute({
    origin: [lat, longit],
    destination: [lat + 1, lng + 1],
    travelMode: 'driving',
    strokeColor: '#131540',
    strokeOpacity: 0.6,
    strokeWeight: 6
  });
});

Answer 1

這是一種方法：

創建一個坐標數組：

var locations = [
  [30.465229, -97.759501],
  [30.459517, -97.754317],
  [30.452511, -97.750729],
  [30.444433, -97.742799],
  [30.436055, -97.734473],
  [30.429190, -97.722731]
];

遍歷坐標並繪制每對之間的路線：

for(var index = 0; index < locations.length; index++) {  
  if (index < locations.length - 1) {
    drawRoute(locations[index], locations[index + 1]);
  }
}

function drawRoute(origin, destination) {
  map.drawRoute({
    origin: origin,
    destination: destination,
    travelMode: 'driving'
  });
}

請查看此JSBin ，以獲取上述代碼的有效版本。