Nhận một đường polyline từ các bản đồ của Google chỉ đường V3

Question

Tôi đang cố gắng để có được một polyline trên bản đồ Google sau khi nhận được hướng dẫn. Tôi muốn sử dụng v3_epoly để đặt điểm đánh dấu dọc theo polyline.

Tôi đã tìm thấy this bài đăng, đã hoạt động nhưng tôi thấy nó không hoàn toàn chính xác. Trong hình, các hướng dẫn của Google là màu xanh nhạt và polyline là màu xanh sẫm:

Bạn có thể thấy nó khá chính xác.

Đây là mã:

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

ai biết hoặc làm thế nào để cải thiện độ chính xác này hoặc để có được những hình nhiều nét cách khác?

EDIT:

tôi muốn thêm mã đó đã nhận nó làm việc:

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

Không sử dụng overview_path cho polyline, nó không bao gồm tất cả các điểm, lấy điểm ra của tất cả các chân và sử dụng chúng để tạo ra các polyline.

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

đoạn mã:

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>