Montrer le chemin sur les routes d'utilisation Google Map

J'ai plusieurs points de longitude et de latitude. Commencez comme une boucle par exemple:

1 long lat, point de départ

2 long lat

3 long lat

4 long lat

. Entrez la description de l'image ici

Nème fin de long point lat

Mon code est:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var markers = [ { "title": '1', "lat": '30.705911', "lng": '76.679656', "description": '1' } , { "title": '2', "lat": '30.701713', "lng": '76.684097', "description": '2' }, { "title": '2', "lat": '30.703291', "lng": ' 76.701022', "description": '2' },{ "title": '2', "lat": '30.691888', "lng": ' 76.710721', "description": '2' } ]; window.onload = function () { var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); var infoWindow = new google.maps.InfoWindow(); var lat_lng = new Array(); var latlngbounds = new google.maps.LatLngBounds(); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); latlngbounds.extend(marker.position); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds); //***********ROUTING****************// //Intialize the Path Array var path = new google.maps.MVCArray(); //Intialize the Direction Service var service = new google.maps.DirectionsService(); //Set the Path Stroke Color var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' }); //Loop and Draw Path Route between the Points on MAP for (var i = 0; i < lat_lng.length; i++) { if ((i + 1) < lat_lng.length) { var src = lat_lng[i]; var des = lat_lng[i + 1]; path.push(src); poly.setPath(path); service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { path.push(result.routes[0].overview_path[i]); } } }); } } } </script> <div id="dvMap" style="width: 800px; height: 800px"> </div>

J'ai des lignes de problèmes de face connectées directement du troisième au troisième point et du quatrième au quatrième

Ne poussez pas la src dans le chemin, c'est un double du premier point dans le chemin d'ensemble. Supprimez cette ligne:

 path.push(src);

Violon de travail

extrait de code:

 var markers = [{ "title": '1', "lat": '30.705911', "lng": '76.679656', "description": '1' }, { "title": '2', "lat": '30.701713', "lng": '76.684097', "description": '2' }, { "title": '2', "lat": '30.703291', "lng": ' 76.701022', "description": '2' }, { "title": '2', "lat": '30.691888', "lng": ' 76.710721', "description": '2' } ]; window.onload = function() { var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); var infoWindow = new google.maps.InfoWindow(); var lat_lng = new Array(); var latlngbounds = new google.maps.LatLngBounds(); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); latlngbounds.extend(marker.position); (function(marker, data) { google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds); //***********ROUTING****************// //Intialize the Path Array var path = new google.maps.MVCArray(); //Intialize the Direction Service var service = new google.maps.DirectionsService(); //Set the Path Stroke Color var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' }); //Loop and Draw Path Route between the Points on MAP for (var i = 0; i < lat_lng.length; i++) { if ((i + 1) < lat_lng.length) { var src = lat_lng[i]; var des = lat_lng[i + 1]; // path.push(src); poly.setPath(path); service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { path.push(result.routes[0].overview_path[i]); } } }); } } }

 html, body, #dvMap { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="http://maps.google.com/maps/api/js"></script> <div id="dvMap" ></div>