Ottieni una polilinea da Google maps indicazioni V3

Question

Sto cercando di ottenere una polilinea su una mappa di Google dopo aver ottenuto indicazioni stradali. Voglio usare lo v3_epoly per posizionare i marcatori lungo una polilinea.

Ho trovato il post this, che funzionava, ma ho trovato che non era completamente preciso. Nell'immagine, le istruzioni di Google è l'azzurro e il poligono è il blu più scuro:

Si può vedere è abbastanza impreciso.

Questo è il codice:

directions_service.route(req, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
    path = response.routes[0].overview_path; 
    $(path).each(function(index, item) { 
     route.getPath().push(item); 
     bounds.extend(item); 
    }); 
    route.setMap(map); 
    map.fitBounds(bounds); 
    directions_display.setDirections(response); 
    } 
}); 

qualcuno sa né come migliorare questa precisione o per ottenere la polilinea in un altro modo?

EDIT:

ho voluto aggiungere il codice che ha ottenuto che funziona:

legs = response.routes[0].legs; 
$(legs).each(function(index, item) { 
    steps = item.steps; 
    $(steps).each(function(index, item) { 
    path = item.path; 
    $(path).each(function(index, item) { 
     route.getPath().push(item); 
     counter++; 
     bounds.extend(item); 
    }); 
    }); 
}); 

Answer 1

Non utilizzare overview_path per la polilinea, non include tutti i punti, afferrare i punti su di tutte le gambe e usarle per creare la polilinea.

var polyline = new google.maps.Polyline({ 
    path: [], 
    strokeColor: '#FF0000', 
    strokeWeight: 3 
}); 
var bounds = new google.maps.LatLngBounds(); 


var legs = response.routes[0].legs; 
for (i=0;i<legs.length;i++) { 
    var steps = legs[i].steps; 
    for (j=0;j<steps.length;j++) { 
    var nextSegment = steps[j].path; 
    for (k=0;k<nextSegment.length;k++) { 
     polyline.getPath().push(nextSegment[k]); 
     bounds.extend(nextSegment[k]); 
    } 
    } 
} 

polyline.setMap(map); 
map.fitBounds(bounds); 

example

frammento di codice:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(51.276092, 1.028938), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map, 
 
    preserveViewport: true 
 
    }); 
 
    directionsService.route({ 
 
    origin: new google.maps.LatLng(51.269776, 1.061326), 
 
    destination: new google.maps.LatLng(51.30118, 0.926486), 
 
    waypoints: [{ 
 
     stopover: false, 
 
     location: new google.maps.LatLng(51.263439, 1.03489) 
 
    }], 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
    if (status === google.maps.DirectionsStatus.OK) { 
 
     // directionsDisplay.setDirections(response); 
 
     var polyline = new google.maps.Polyline({ 
 
     path: [], 
 
     strokeColor: '#0000FF', 
 
     strokeWeight: 3 
 
     }); 
 
     var bounds = new google.maps.LatLngBounds(); 
 

 

 
     var legs = response.routes[0].legs; 
 
     for (i = 0; i < legs.length; i++) { 
 
     var steps = legs[i].steps; 
 
     for (j = 0; j < steps.length; j++) { 
 
      var nextSegment = steps[j].path; 
 
      for (k = 0; k < nextSegment.length; k++) { 
 
      polyline.getPath().push(nextSegment[k]); 
 
      bounds.extend(nextSegment[k]); 
 
      } 
 
     } 
 
     } 
 

 
     polyline.setMap(map); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>