[英]How to draw Route map between multiple markers in google maps using javascript
I developed maps using google maps API.我使用谷歌地图 API 开发地图。 Markers are visible with proper labels.
标记是可见的,带有适当的标签。 But how can I draw a route between the multiple markers?
但是如何在多个标记之间绘制路线?
Google map image:谷歌地图图片:
JS file code is as following ( userhistory.js ) JS文件代码如下( userhistory.js )
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 }); directionsDisplay.setMap(map); 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 }); 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)); }
I'm Confused, anyone can help?我很困惑,有人可以帮忙吗?
You can follow the sample here to use your markers as waypoints for generating route.您可以按照此处的示例将标记用作生成路线的航路点。
https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints 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);
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.