Comportamento incoerente che traccia una rotta tra due punti in Google Maps v3

Lo scenario

Sto cercando di tracciare un percorso tra n punti (lat, lan) utilizzando Google Maps v3. Per fare ciò, utilizzo DirectionsService che mi fornisce un percorso, quindi MVCArray coordinate in un MVCArray e quindi disegno quel percorso utilizzando una Polyline .

Il codice

Ecco un jsfiddle che dimostra qui quella parte di codice .

HTML:

 

CSS:

 #map{ width:400px; height:400px; } 

JavaScript:

 $(function () { //The list of points to be connected var markers = [ { "title": 'Duero', "lat": '40.480243', "lng": '-3.866172', "description": '1' }, { "title": 'Reyes Catolicos', "lat": '40.477997', "lng": '-3.870865', "description": '2' }, { "title": 'Guadarrama', "lat": '40.478998', "lng": '-3.878755', "description": '3' } ]; var map; var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 15 , mapTypeId: google.maps.MapTypeId.ROADMAP }; var path = new google.maps.MVCArray(); var service = new google.maps.DirectionsService(); var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById("map"), mapOptions); var poly = new google.maps.Polyline({ map: map, strokeColor: '#F3443C' }); var lat_lng = new Array(); path.push(new google.maps.LatLng(markers[0].lat, markers[0].lng)); for (var i = 0; i < markers.length; i++) { if ((i + 1) < markers.length) { var src = new google.maps.LatLng(markers[i].lat, markers[i].lng); var des = new google.maps.LatLng(markers[i+1].lat, markers[i+1].lng); 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]); } } }); } } }); 

Comportamento previsto

Dovrei ottenere una serie di linee rette disegnate, collegando i punti (lat, lan) specificati nei markers variabili, con la larghezza e il colore specificati. Più specificamente il Point 1 è collegato solo al Point 2 che a sua volta è collegato al Point 3

Con il codice nel violino, vorrei vedere, questo: inserisci la descrizione dell'immagine qui

Comportamento reale

Ottengo l’immagine precedente, ma non sempre. Se aggiorni, alcune volte finirai per ottenere questo, che credo sia il risultato dell’aggiunta di una linea in più che collega i punti in linea d’aria , tuttavia, essendo un comportamento incoerente, sto lottando per trovare la fonte di esso, Ho semplificato l’esempio, ho un array di vertici il più piccolo ansible e, per quanto posso vedere, il percorso disegnato dovrebbe essere lo stesso, poiché i dati sono gli stessi. Devo ammettere che non ho mai approfondito l’API di google maps in modo approfondito, quindi il codice sorgente è principalmente il risultato del copiare e incollare dal lavoro su campioni online, in particolare questo che soffre anche dello stesso problema.

Ciò significa che potrei utilizzare una versione obsoleta di Google Maps, inizializzarla in modo errato o qualsiasi altro problema di base o configurazione errata. Oppure, dall’altra parte, potrebbe essere un problema con il client, ad esempio Mac Chrome versione più recente, poiché apparentemente non sta accadendo in Chrome per Android sul mio telefono (Nexus 5, ultima, stock)

inserisci la descrizione dell'immagine qui

Non aggiungere la destinazione, l’origine e le posizioni dei waypoint alla polilinea, solo i punti dal servizio di indicazioni stradali:

violino funzionante

 var map = null; var infowindow = new google.maps.InfoWindow(); var bounds = new google.maps.LatLngBounds(); //The list of points to be connected var markers = [{ "title": 'Duero', "lat": '40.480243', "lng": '-3.866172', "description": '1' }, { "title": 'Reyes Catolicos', "lat": '40.47806', "lng": '-3.870937', "description": '2' }, { "title": 'Guadarrama', "lat": '40.478998', "lng": '-3.878755', "description": '3' }]; // var map; function initialize() { var mapOptions = { center: new google.maps.LatLng( parseFloat(markers[0].lat), parseFloat(markers[0].lng)), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; var service = new google.maps.DirectionsService(); var infoWindow = new google.maps.InfoWindow(); map = new google.maps.Map(document.getElementById("map"), mapOptions); var lat_lng = new Array(); var marker = new google.maps.Marker({ position: map.getCenter(), map: map, draggable: true }); bounds.extend(marker.getPosition()); google.maps.event.addListener(marker, "click", function(evt) { infowindow.setContent("coord:" + marker.getPosition().toUrlValue(6)); infowindow.open(map, marker); }); for (var i = 0; i < markers.length; i++) { if ((i + 1) < markers.length) { var src = new google.maps.LatLng(parseFloat(markers[i].lat), parseFloat(markers[i].lng)); createMarker(src); var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat), parseFloat(markers[i + 1].lng)); createMarker(des); // poly.setPath(path); service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { var path = new google.maps.MVCArray(); var poly = new google.maps.Polyline({ map: map, strokeColor: '#F3443C' }); for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { path.push(result.routes[0].overview_path[i]); } poly.setPath(path); map.fitBounds(bounds); } }); } } } function createMarker(latLng) { var marker = new google.maps.Marker({ position: latLng, map: map, draggable: true }); bounds.extend(marker.getPosition()); google.maps.event.addListener(marker, "click", function(evt) { infowindow.setContent("coord:" + this.getPosition().toUrlValue(6)); infowindow.open(map, this); }); } google.maps.event.addDomListener(window, 'load', initialize); 
 html, body, #map { width: 100%; height: 100%; }