Получите полилинию из указаний карт Google V3

Question

Я пытаюсь получить полилинию на карте Google после получения указаний. Я хочу использовать v3_epoly для размещения маркеров вдоль полилинии.

Я нашел this пост, который работал, но я обнаружил, что он был не совсем точным. В изображении, направления Google является светло-голубой и ломаная является темно-синим:

Вы можете видеть, что это довольно неточно.

Это код:

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); 
    } 
}); 

Каждый знает, либо как улучшить эту точность или получить полилинию другой путь?

EDIT:

Я хотел бы добавить код, который получил это работает:

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

Не используйте overview_path для ломаной линии, она не включает в себя все точки, возьмите очки из всех ног и использовать их для создания полилинии.

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

фрагмент кода:

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>