如何使用javascript在Google地图中的多个标记之间绘制路线图

Question

我使用Google地图API开发了地图。标记以正确的标签显示。但是我怎样才能在多个标记之间绘制路线。我很困惑，任何人都可以帮忙？

谷歌地图的图像： ​​

JS文件代码如下（userhistory.js）

var \t marker = []; 
 
\t \t \t \t \t \t $("#map").show(); 
 
\t \t \t \t   \t map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t \t  \t \t \t zoom: 10, 
 
\t \t \t  \t \t  center: new google.maps.LatLng(17.7254567, 83.3097112), 
 
\t \t \t  \t \t  mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t \t  \t \t }); 
 

 
\t \t \t \t   \t directionsDisplay.setMap(map); 
 
\t \t \t  var infowindow = new google.maps.InfoWindow(); 
 
\t \t \t  var i; 
 
\t \t \t \t 
 
\t \t \t  for (i = 0; i < response.length; i++) { 
 
\t \t \t  \t 
 
\t \t \t \t  marker = new google.maps.Marker({ 
 
\t \t \t   position: new google.maps.LatLng(response[i].latitude, response[i].longitude), 
 
\t \t \t   map: map, 
 
\t \t \t   label: response[i].count 
 
\t \t \t  \t }); 
 

 
\t \t \t  \t google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
\t \t \t   return function() { 
 
\t \t \t   infowindow.setContent("Name :"+response[i].name+","+"<br>"+"Date & Time :"+response[i].date+", "+response[i].time+","+"<br>"+"Location :"+response[i].address); 
 
\t \t \t   infowindow.open(map, marker); 
 
\t \t \t   } 
 
\t \t \t  })(marker, i)); 
 
\t \t \t }

Answer 1

您可以按照样品在这里用你的标记作为生成路线的路标。

https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

var marker = []; 
$("#map").show(); 
map = new google.maps.Map(document.getElementById('map'), { 
zoom: 10, 
center: new google.maps.LatLng(17.7254567, 83.3097112), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 

directionsDisplay = new google.maps.DirectionsRenderer(); 
directionsDisplay.setMap(map); 

var startPoint; 
var endPoint; 
var waypts = []; 

var infowindow = new google.maps.InfoWindow(); 
var i; 

for (i = 0; i < response.length; i++) {  
marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(response[i].latitude, response[i].longitude), 
    map: map, 
    label: response[i].count 
}); 

if (i == 0) { 
    startPoint = new google.maps.LatLng(response[i].latitude, response[i].longitude) 
} 

if (i == response.length - 1) { 
    endPoint = new google.maps.LatLng(response[i].latitude, response[i].longitude), 
} 

if ((i > 0) && (i < response.length - 1)) { 
    waypts.push({ 
     location: ew google.maps.LatLng(response[i].latitude, response[i].longitude), 
     stopover: true 
    }); 
} 

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
return function() { 
    infowindow.setContent("Name :"+response[i].name+","+"<br>"+"Date & Time :"+response[i].date+", "+response[i].time+","+"<br>"+"Location :"+response[i].address); 
    infowindow.open(map, marker); 
} 
})(marker, i)); 
} 

calcRoute(startPoint, endPoint, waypts); 

//add this function 
function calcRoute(start,end,waypts) { 
var request = { 
    origin: start, 
    destination: end, 
    waypoints: waypts, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
}; 
directionsService.route(request, function(response, status) { 
if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
} 
}); 
}