Как нарисовать карту маршрутов между несколькими маркерами в картах Google, используя JavaScript

1

Я разработал карты, используя API карт Google. Маркеры видны с соответствующими метками. Но как я могу нарисовать маршрут между несколькими маркерами. Я смущен, любой может помочь?

Изображение карты Google: изображение GoogleMap

Код файла 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));  
			}
Теги:
google-maps
google-maps-api-3

1 ответ

0

Вы можете следовать примеру здесь, чтобы использовать ваши маркеры в качестве путевых точек для генерации маршрута.

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);
}
});
}
  • 0
    Спасибо за ответ. Я пытался босс. Это не правильный ответ, я думаю.
  • 0
    Попробуйте следовать сценарию здесь .
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню